24:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:T82b,// What the palette offers, in groups; the hint is the press each stands for. const actions = (say: (what: string) => void): CommandGroup[] => [ { heading: "clip", actions: [ { icon: , label: "split at the playhead", hint: "mod+b", keywords: ["cut"], onSelect: () => say("split"), }, { icon: , label: "duplicate clip", hint: "mod+d", onSelect: () => say("duplicate"), }, { icon: , label: "rename clip", hint: "f2", onSelect: () => say("rename"), }, { icon: , label: "move to trash", hint: "mod+backspace", keywords: ["delete", "remove"], onSelect: () => say("trash"), }, ], }, { heading: "film", actions: [ { icon: , label: "export the whole film", hint: "mod+shift+e", onSelect: () => say("export"), }, { icon: , label: "share a link", onSelect: () => say("share"), }, { icon: , label: "open in the player", onSelect: () => say("open"), }, ], }, { heading: "view", actions: [ { icon: , label: "switch to the dark theme", keywords: ["appearance"], onSelect: () => say("theme"), }, ], }, ] function Palette() { const [open, setOpen] = React.useState(false) const [said, say] = React.useState("") return (

{said && ran: {said}}

) }

26:T598f,

// What the palette offers, in groups; the hint is the press each stands for.
const actions = (say: (what: string) => void): CommandGroup[] => [
  {
    heading: "clip",
    actions: [
      {
        icon: <Scissors />,
        label: "split at the playhead",
        hint: "mod+b",
        keywords: ["cut"],
        onSelect: () => say("split"),
      },
      {
        icon: <Copy />,
        label: "duplicate clip",
        hint: "mod+d",
        onSelect: () => say("duplicate"),
      },
      {
        icon: <Pencil />,
        label: "rename clip",
        hint: "f2",
        onSelect: () => say("rename"),
      },
      {
        icon: <Trash2 />,
        label: "move to trash",
        hint: "mod+backspace",
        keywords: ["delete", "remove"],
        onSelect: () => say("trash"),
      },
    ],
  },
  {
    heading: "film",
    actions: [
      {
        icon: <Download />,
        label: "export the whole film",
        hint: "mod+shift+e",
        onSelect: () => say("export"),
      },
      {
        icon: <Share2 />,
        label: "share a link",
        onSelect: () => say("share"),
      },
      {
        icon: <Film />,
        label: "open in the player",
        onSelect: () => say("open"),
      },
    ],
  },
  {
    heading: "view",
    actions: [
      {
        icon: <Moon />,
        label: "switch to the dark theme",
        keywords: ["appearance"],
        onSelect: () => say("theme"),
      },
    ],
  },
]

function Palette() {
  const [open, setOpen] = React.useState(false)
  const [said, say] = React.useState("")
  return (
    <div className="flex items-center gap-3 text-current/70 text-sm">
      <Button variant="secondary" onClick={() => setOpen(true)}>
        commands
      </Button>
      {said && <span>ran: {said}</span>}
      <Command open={open} onOpenChange={setOpen} groups={actions(say)} />
    </div>
  )
}

<MaterialProvider material="glass">
  <div className="grid place-items-center rounded-2xl bg-[url(/lightbox/lake.jpg)] bg-cover bg-center p-12 text-white">
    <Palette />
  </div>
</MaterialProvider>

20:["$","div","glass",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L24",null,{"value":"$25","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}],false]}]