Astryx Avatar

'use client';

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

const CDN = 'https://lookaside.facebook.com/assets/astryx';

const USERS = [
  {
    name: 'Ami Pena',
    src: `${CDN}/DATA-Ami-Pena.png`,
  },
  {
    name: 'Drew Young',
    src: `${CDN}/DATA-Drew-Young.png`,
  },
  {
    name: 'Gabriela Fernandez',
    src: `${CDN}/DATA-Gabriela-Fernandez.png`,
  },
  {
    name: 'Jihoo Song',
    src: `${CDN}/DATA-Jihoo-Song.png`,
  },
  {
    name: 'Nam Tran',
    src: `${CDN}/DATA-Nam-Tran.png`,
  },
];

export default function AvatarGroupBlock() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={8}>
          <Stack direction="vertical" gap={3}>
            <Text type="supporting" color="secondary">
              Team members
            </Text>
            <AvatarGroup size="medium">
              {USERS.map(user => (
                <Avatar key={user.name} src={user.src} name={user.name} />
              ))}
              <AvatarGroupOverflow count={3} />
            </AvatarGroup>
          </Stack>
          <Stack direction="vertical" gap={3}>
            <Text type="supporting" color="secondary">
              Larger group
            </Text>
            <AvatarGroup size="medium">
              {USERS.slice(0, 3).map(user => (
                <Avatar key={user.name} src={user.src} name={user.name} />
              ))}
              <AvatarGroupOverflow count={8} />
            </AvatarGroup>
          </Stack>
        </Stack>
      </div>
    </Theme>
  );
}