{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-menu-01",
  "type": "registry:block",
  "title": "Command Menu with Groups",
  "description": "A command menu with groups block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "command",
    "kbd"
  ],
  "dependencies": [
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "content/components/command-menu/command-menu-01.tsx",
      "type": "registry:component",
      "target": "components/command-menu-01.tsx",
      "content": "'use client';\n\nimport {\n  IconBell,\n  IconBolt,\n  IconCalendar,\n  IconChartBar,\n  IconChartPie,\n  IconClock,\n  IconFileText,\n  IconHelp,\n  IconKeyboard,\n  IconLayoutDashboard,\n  IconLayoutKanban,\n  IconLogout,\n  IconMessage,\n  IconPalette,\n  IconSettings,\n  IconSquareCheck,\n  IconTarget,\n  IconTrendingUp,\n  IconUsers,\n} from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command';\nimport { Kbd } from '@/components/ui/kbd';\n\nconst workspaceItems = [\n  { icon: IconLayoutDashboard, label: 'Dashboard' },\n  { icon: IconLayoutKanban, label: 'Projects' },\n  { icon: IconSquareCheck, label: 'Tasks' },\n  { icon: IconCalendar, label: 'Calendar' },\n  { icon: IconUsers, label: 'Team members' },\n  { icon: IconMessage, label: 'Messages' },\n  { icon: IconFileText, label: 'Documents' },\n  { icon: IconBell, label: 'Notifications' },\n  { icon: IconClock, label: 'Time tracking' },\n  { icon: IconTarget, label: 'Goals' },\n];\n\nconst analyticsItems = [\n  { icon: IconChartBar, label: 'Overview' },\n  { icon: IconTrendingUp, label: 'Performance' },\n  { icon: IconChartPie, label: 'Reports' },\n  { icon: IconBolt, label: 'Insights' },\n];\n\nconst settingsItems = [\n  { icon: IconSettings, label: 'Preferences' },\n  { icon: IconPalette, label: 'Appearance' },\n  { icon: IconKeyboard, label: 'Keyboard shortcuts' },\n  { icon: IconHelp, label: 'Help & support' },\n  { icon: IconLogout, label: 'Sign out' },\n];\n\nexport function CommandMenu01() {\n  const [open, setOpen] = useState(true);\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((prev) => !prev);\n      }\n    };\n\n    document.addEventListener('keydown', down);\n    return () => document.removeEventListener('keydown', down);\n  }, []);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)} variant=\"outline\">\n        Open Command Menu\n      </Button>\n\n      <CommandDialog onOpenChange={setOpen} open={open} showCloseButton={false}>\n        <Command>\n          <CommandInput\n            className=\"h-12\"\n            placeholder=\"Type a command or search...\"\n          />\n          <CommandList className=\"h-[320px] max-h-[320px]\">\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup heading=\"Workspace\">\n              {workspaceItems.map((item) => (\n                <CommandItem key={item.label}>\n                  <item.icon className=\"mr-2 h-5 w-5\" />\n                  <span>{item.label}</span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandGroup heading=\"Analytics\">\n              {analyticsItems.map((item) => (\n                <CommandItem key={item.label}>\n                  <item.icon className=\"mr-2 h-5 w-5\" />\n                  <span>{item.label}</span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandGroup heading=\"Settings\">\n              {settingsItems.map((item) => (\n                <CommandItem key={item.label}>\n                  <item.icon className=\"mr-2 h-5 w-5\" />\n                  <span>{item.label}</span>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n          <div className=\"flex h-12 items-center justify-end border-t px-3\">\n            <button\n              className=\"flex items-center gap-1 text-muted-foreground text-sm hover:text-foreground\"\n              onClick={() => setOpen(false)}\n              type=\"button\"\n            >\n              <span>Close</span>\n              <Kbd className=\"ml-1\">Esc</Kbd>\n            </button>\n          </div>\n        </Command>\n      </CommandDialog>\n    </>\n  );\n}\n"
    }
  ],
  "categories": [
    "command-menu"
  ]
}