Astryx Avatar

'use client';

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

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

export default function AvatarShowcase() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="horizontal" gap={4} vAlign="center">
          <Avatar
            src={`${CDN}/DATA-Ana-Thomas.png`}
            name="Ana Thomas"
            size="large"
            status={<AvatarStatusDot variant="success" label="Online" />}
          />
          <Avatar
            src={`${CDN}/DATA-Drew-Young.png`}
            name="Drew Young"
            size="large"
          />
          <Avatar
            src={`${CDN}/DATA-Jihoo-Song.png`}
            name="Jihoo Song"
            size="large"
          />
          <Avatar
            src={`${CDN}/DATA-Nam-Tran.png`}
            name="Nam Tran"
            size="large"
            status={<AvatarStatusDot variant="error" label="Online" />}
          />
        </Stack>
      </div>
    </Theme>
  );
}