Command Menu

import * as React from "react"
 
import * as CommandMenu from "@/components/ui/command-menu"
 
export default function CommandMenuExample() {
  const [open, setOpen] = React.useState(false)
 
  React.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 (
    <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
      <CommandMenu.Input placeholder="Type a command..." />
      <CommandMenu.List>
        <CommandMenu.Group>
          <CommandMenu.Item>
            <span>Calendar</span>
          </CommandMenu.Item>
          <CommandMenu.Item>
            <span>Search Emoji</span>
          </CommandMenu.Item>
        </CommandMenu.Group>
      </CommandMenu.List>
    </CommandMenu.Dialog>
  )
}