Command

import { Command } from '@bit/ui'

<Command.Root>
  <Command.Input placeholder='Type a command or search...' />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading='Suggestions'>
      <Command.Item>Calendar</Command.Item>
      <Command.Item>Search Emoji</Command.Item>
      <Command.Item>Calculator</Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading='Settings'>
      <Command.Item>Profile</Command.Item>
      <Command.Item>Billing</Command.Item>
      <Command.Item>Settings</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

export function CommandMenu() {
  const [open, setOpen] = useState(false)
 
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }
    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])
 
  return (
    <Command.Dialog open={open} onOpenChange={setOpen}>
      <Command.Input placeholder='Type a command or search...' />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading='Suggestions'>
          <Command.Item>Calendar</Command.Item>
          <Command.Item>Search Emoji</Command.Item>
          <Command.Item>Calculator</Command.Item>
        </Command.Group>
      </Command.List>
    </Command.Dialog>
  )
}