EditorShell

import { Button, FloatingToolbar, IconButton } from '@anicanon/sakuga/ui';
import {
  EditorHeader,
  EditorShell,
  Monitor,
  MonitorBar,
} from '@anicanon/sakuga/anicanonkit';

const on = {
  color: 'var(--text-on-media)',
  font: '700 14px/18px var(--font-display)',
  padding: '0 6px',
};

const onMuted = {
  color: 'var(--text-on-media-muted)',
  font: '600 12.5px/16px var(--font-sans)',
  paddingRight: 6,
};

const tools = [
  ['collection', 'Media'],
  ['template', 'Titles'],
  ['effect-sparks', 'Effects'],
  ['sliders', 'Adjust'],
  ['volume', 'Audio'],
];

const focusShell = (
  <EditorShell height={240} focus>
    <Monitor image="/art/eba-cinema.webp" height={150} />
    <MonitorBar timecode="2:41 + 04f">
      <Button variant="ghost" size="sm">
        Split
      </Button>
    </MonitorBar>
    <span slot="float">
      <div
        style={{
          position: 'absolute',
          left: 24,
          right: 24,
          top: 20,
          display: 'flex',
          alignItems: 'center',
          gap: 10,
        }}
      >
        <FloatingToolbar label="Production">
          <b style={on}>The First Watch</b>
          <span style={onMuted}>Cut · 2:41 + 04f</span>
        </FloatingToolbar>
        <FloatingToolbar label="Tools">
          {tools.map((t) => (
            <IconButton key={t[1]} variant="media" icon={t[0]} label={t[1]} />
          ))}
        </FloatingToolbar>
        <span style={{ flex: 1 }} />
        <Button variant="media-secondary" size="sm" icon="fullscreen">
          Leave focus
        </Button>
      </div>
    </span>
  </EditorShell>
);

export default function EditorShellExample() {
  return (
    <>
      <EditorShell height={240}>
        <span slot="header">
          <EditorHeader
            title="The First Watch"
            timecode="Cut · 2:41 + 04f of 6:40"
            status="Rebuilds exactly"
          >
            <Button variant="primary" size="sm">
              Screen the cut
            </Button>
          </EditorHeader>
        </span>
        <span slot="tool">
          <div style={{ font: '600 13px var(--font-sans)' }}>Media</div>
        </span>
        <Monitor
          image="/art/eba-cinema.webp"
          labels={['2C · take 3', '2:41 + 04f']}
          height={110}
        />
        <MonitorBar timecode="2:41 + 04f">
          <Button variant="ghost" size="sm">
            Split
          </Button>
        </MonitorBar>
        <span slot="inspector">
          <div style={{ font: '600 13px var(--font-sans)' }}>Cut 2C</div>
        </span>
      </EditorShell>
      {focusShell}
    </>
  );
}