"use client"

import * as React from "react"

import { Button } from "@/registry/ui/button/button"
import {
  Command,
  CommandCollection,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/registry/ui/command/command"

interface CommandEntry {
  value: string
  label: string
  hint: string
}

interface CommandSection {
  value: string
  items: CommandEntry[]
}

const sections: CommandSection[] = [
  {
    value: "Components",
    items: [
      { value: "button", label: "Button", hint: "actions" },
      { value: "input", label: "Input", hint: "forms" },
      { value: "card", label: "Card", hint: "layout" },
      { value: "dialog", label: "Dialog", hint: "overlays" },
    ],
  },
  {
    value: "Actions",
    items: [
      { value: "boost-relay", label: "Boost relay signal", hint: "⇧B" },
      { value: "rotate-callsign", label: "Rotate station callsign", hint: "⇧R" },
      { value: "open-log", label: "Open transmission log", hint: "⇧L" },
      { value: "recalibrate", label: "Recalibrate antenna array", hint: "⇧A" },
    ],
  },
]

export default function CommandBasicDemo() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
        event.preventDefault()
        setOpen((prev) => !prev)
      }
    }
    window.addEventListener("keydown", onKeyDown)
    return () => window.removeEventListener("keydown", onKeyDown)
  }, [])

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open command console
        <kbd className="rounded-sm border border-border bg-surface-1 px-1.5 font-mono text-[10px] text-muted-foreground">
          ⌘K
        </kbd>
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <Command items={sections}>
          <CommandInput
            placeholder="Search the console…"
            aria-label="Search commands"
          />
          <CommandEmpty />
          <CommandList>
            {(section: CommandSection) => (
              <CommandGroup
                key={section.value}
                items={section.items}
                label={section.value}
              >
                <CommandCollection>
                  {(item: CommandEntry) => (
                    <CommandItem
                      key={item.value}
                      value={item}
                      onClick={() => setOpen(false)}
                    >
                      <span className="min-w-0 flex-1 truncate">
                        {item.label}
                      </span>
                      <span className="shrink-0 font-mono text-xs text-muted-foreground">
                        {item.hint}
                      </span>
                    </CommandItem>
                  )}
                </CommandCollection>
              </CommandGroup>
            )}
          </CommandList>
        </Command>
      </CommandDialog>
    </>
  )
}
Draw

Examples
