Astryx Avatar Group

'use client';

import AvatarGroup, {
  AvatarGroupOverflow,
} from '@/components/ui/astryx-avatar-group';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Avatar} from '@astryxdesign/core/Avatar';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

const REVIEWERS = [
  {
    name: 'Alex Daniels',
  },
  {
    name: 'Ann Smith',
  },
  {
    name: 'Carol Davis',
  },
];

export default function AvatarGroupOverflowDefault() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={3}>
          <Text type="supporting" color="secondary">
            Reviewers
          </Text>
          <AvatarGroup size="medium">
            {REVIEWERS.map(reviewer => (
              <Avatar key={reviewer.name} name={reviewer.name} />
            ))}
            <AvatarGroupOverflow count={2} />
          </AvatarGroup>
        </Stack>
      </div>
    </Theme>
  );
}