Command Menu

1"use client"
2 
3import * as React from "react"
4import * as ReactDOM from "react-dom"
5import { Command } from "cmdk"
6import { Search, ArrowRight, X } from "lucide-react"
7import { motion, AnimatePresence } from "framer-motion"
8 
9import { cn } from "@/lib/utils"
10 
11export interface CommandMenuItem {
12  id: string
13  title: string
14  group?: string
15  icon?: React.ReactNode
16  onSelect?: () => void
17}
18 
19export interface CommandMenuGroup {
20  title: string
21  items: CommandMenuItem[]
22}
23 
24export interface CommandMenuProps {
25  groups: CommandMenuGroup[]
26  placeholder?: string
27  emptyMessage?: string
28  brandName?: string
29  triggerClassName?: string
30  triggerLabel?: string
31  shortcutKey?: string
32  open?: boolean
33  onOpenChange?: (open: boolean) => void
34}
35 
36function CommandMenu({
37  groups,
38  placeholder = "Search...",
39  emptyMessage = "No results found",
40  brandName = "Command Menu",
41  triggerClassName,
42  triggerLabel = "Search...",
43  shortcutKey = "K",
44  open: controlledOpen,
45  onOpenChange,
46}: CommandMenuProps) {
47  const [internalOpen, setInternalOpen] = React.useState(false)
48  const [query, setQuery] = React.useState("")
49  const inputRef = React.useRef<HTMLInputElement>(null)
50 
51  const isControlled = controlledOpen !== undefined
52  const open = isControlled ? controlledOpen : internalOpen
53  const setOpen = isControlled ? (onOpenChange ?? (() => {})) : setInternalOpen
54 
55  React.useEffect(() => {
56    const down = (e: KeyboardEvent) => {
57      if (e.key.toLowerCase() === shortcutKey.toLowerCase() && (e.metaKey || e.ctrlKey)) {
58        e.preventDefault()
59        setOpen(!open)
60      }
61      if (e.key === "Escape") {
62        setOpen(false)
63      }
64    }
65 
66    document.addEventListener("keydown", down)
67    return () => document.removeEventListener("keydown", down)
68  }, [open, setOpen, shortcutKey])
69 
70  React.useEffect(() => {
71    if (open) {
72      setTimeout(() => {
73        inputRef.current?.focus()
74      }, 0)
75    } else {
76      setQuery("")
77    }
78  }, [open])
79 
80  const handleSelect = React.useCallback((item: CommandMenuItem) => {
81    setOpen(false)
82    item.onSelect?.()
83  }, [setOpen])
84 
85  return (
86    <>
87      <button
88        onClick={() => setOpen(true)}
89        className={cn(
90          "group inline-flex items-center gap-2 whitespace-nowrap transition-all duration-200",
91          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
92          "disabled:pointer-events-none disabled:opacity-50",
93// … truncated