Command Bar

import { CommandBar, CommandBarGroup, CommandBarItem, useCommandBar } from '@otfdashkit/ui'

function CommandBarDemo() {
  const { open, setOpen } = useCommandBar()
  return (
    <div className="space-y-3">
      <button className="text-sm underline" onClick={() => setOpen(true)}>Open Command Bar (⌘K)</button>
      <CommandBar open={open} onOpenChange={setOpen}>
        <CommandBarGroup heading="Navigation">
          <CommandBarItem label="Go to Dashboard" shortcut="G D" onSelect={() => setOpen(false)} />
          <CommandBarItem label="Go to Projects" shortcut="G P" onSelect={() => setOpen(false)} />
        </CommandBarGroup>
        <CommandBarGroup heading="Actions">
          <CommandBarItem label="New Project" shortcut="⌘N" onSelect={() => setOpen(false)} />
          <CommandBarItem label="Invite Team Member" onSelect={() => setOpen(false)} />
        </CommandBarGroup>
      </CommandBar>
    </div>
  )
}

export function Example() {
  return (
    <CommandBarDemo />
  )
}