CastCard

import { CastCard } from '@anicanon/sakuga/anicanonkit';

export default function CastCardExample() {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4,170px)',
        gap: 12,
      }}
    >
      {[
        {
          name: 'Kiko',
          image: '/art/eba-cast-kiko.webp',
          role: 'Leads the E.R.A.',
          meta: '2 looks',
        },
        {
          name: 'Rick',
          initial: 'R',
          action: { label: 'Face sheet ready, review', tone: 'attention' },
        },
        {
          name: 'Sophia',
          initial: 'S',
          action: { label: 'Continue setup', tone: 'draft' },
        },
        {
          name: 'Tattoo',
          initial: 'T',
          action: { label: 'Designing the look', tone: 'busy', time: '0:31' },
        },
        {
          name: 'The Professor',
          image: '/art/eba-cast-the-professor.webp',
          role: 'Arthur Penhaligon',
          state: { label: '1 look waiting on you', tone: 'attention' },
        },
        { name: 'Felix', initial: 'F' },
      ]
        .slice(0, 4)
        .map((c, i) => (
          <CastCard {...Object.assign({ key: i, href: '#' }, c)} />
        ))}
    </div>
  );
}