ProductionNav

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

const views = [
  { icon: 'document', label: 'Script', note: '5 scenes' },
  { icon: 'frame-cinematic', label: 'Plan', note: '22 cuts' },
  { icon: 'video', label: 'Make', note: '3 to review', state: 'attention' },
  { icon: 'film', label: 'Cut', note: '6:40' },
  { icon: 'eye', label: 'Screen' },
  { icon: 'share', label: 'Publish' },
];

export default function ProductionNavExample() {
  return (
    <Fragment>
      <ProductionNav
        back={{ label: 'Episodes' }}
        production={{
          title: 'The First Watch',
          meta: 'Episode 2 · Directed · 16:9',
        }}
        views={views}
        current="Make"
        sections={{
          title: 'Scenes',
          selected: 2,
          items: [
            { number: 1, title: 'Toddy’s bedroom', note: 'In the cut' },
            {
              number: 2,
              title: 'Smith’s apartment',
              note: '2 to review',
              state: 'attention',
            },
            { number: 3, title: 'The stairs', note: 'In the cut' },
          ],
        }}
        facts={[
          { label: 'Cut', value: '6:40 of 11:00', percent: 60 },
          { label: 'Story', value: 'After Kiko’s offer' },
        ]}
        balance="9,427"
      />
      <ProductionNav
        collapsed
        views={views}
        current="Cut"
        tools={[
          { icon: 'collection', label: 'Media' },
          { icon: 'effect-sparks', label: 'Effects' },
          { icon: 'volume', label: 'Audio' },
          { icon: 'captions', label: 'Captions' },
        ]}
        currentTool="Effects"
        balance="9,427"
      />
    </Fragment>
  );
}