{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-menu-02",
  "type": "registry:block",
  "title": "Command Menu with Keyboard Shortcuts",
  "description": "A command menu with keyboard shortcuts block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "command",
    "dialog",
    "kbd"
  ],
  "dependencies": [
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "content/components/command-menu/command-menu-02.tsx",
      "type": "registry:component",
      "target": "components/command-menu-02.tsx",
      "content": "'use client';\n\nimport {\n  IconArrowRight,\n  IconAt,\n  IconCopy,\n  IconDeviceDesktop,\n  IconDownload,\n  IconFile,\n  IconFileSearch,\n  IconKeyboard,\n  IconLink,\n  IconLogout,\n  IconMessage,\n  IconPencil,\n  IconPlus,\n  IconSend,\n  IconSettings,\n  IconTemplate,\n  IconUser,\n  IconUsers,\n} from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog';\nimport { Kbd, KbdGroup } from '@/components/ui/kbd';\n\nexport function CommandMenu02() {\n  const [open, setOpen] = useState(true);\n  const [inputValue, setInputValue] = useState('');\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      <Dialog onOpenChange={setOpen} open={open}>\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>Command Menu</DialogTitle>\n          <DialogDescription>\n            Use the command menu to navigate through the app.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogContent\n          className=\"gap-0 overflow-hidden rounded-xl border-border/50 p-0 shadow-lg sm:max-w-lg\"\n          showCloseButton={false}\n        >\n          <Command className=\"flex h-full w-full flex-col overflow-hidden bg-popover **:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:grow **:data-[slot=command-input-wrapper]:border-0 **:data-[slot=command-input-wrapper]:px-0\">\n            <div className=\"flex h-12 items-center gap-2 border-border/50 border-b px-4\">\n              <CommandInput\n                className=\"h-10 text-[15px]\"\n                onValueChange={setInputValue}\n                placeholder=\"What do you need?\"\n                value={inputValue}\n              />\n              <button\n                className=\"flex shrink-0 items-center\"\n                onClick={() => setOpen(false)}\n                type=\"button\"\n              >\n                <Kbd>Esc</Kbd>\n              </button>\n            </div>\n\n            <CommandList className=\"max-h-[400px] py-2\">\n              <CommandEmpty>No results found.</CommandEmpty>\n\n              <CommandGroup>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconSettings aria-hidden />\n                  Account Settings...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>,</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconUser aria-hidden />\n                  Switch Workspace...\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconLogout aria-hidden />\n                  Log Out\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>Q</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"Documents\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconFile aria-hidden />\n                  Search Documents...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>F</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconPlus aria-hidden />\n                  Create New Document...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>N</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconFile aria-hidden />\n                  Upload Document...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>U</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"Signing\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconSend aria-hidden />\n                  Request Signature...\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconPencil aria-hidden />\n                  Sign a Document...\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconUsers aria-hidden />\n                  Bulk Send for Signature...\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"Templates\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconTemplate aria-hidden />\n                  Search Templates...\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconPlus aria-hidden />\n                  Create New Template...\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"General\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconDeviceDesktop aria-hidden />\n                  Change Theme...\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>T</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconCopy aria-hidden />\n                  Copy Current URL\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>⇧</Kbd>\n                    <Kbd>C</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;<strong className=\"font-semibold\">Inbox</strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Action Required</strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">\n                      Waiting for Others\n                    </strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Completed</strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;<strong className=\"font-semibold\">Drafts</strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Templates</strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Archive</strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;<strong className=\"font-semibold\">Trash</strong>\n                  </span>\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconArrowRight aria-hidden />\n                  <span>\n                    Go to&nbsp;\n                    <strong className=\"font-semibold\">Settings</strong>\n                  </span>\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"Quick Actions\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconLink aria-hidden />\n                  Copy Signing Link\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconDownload aria-hidden />\n                  Download Document\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"Help\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconFileSearch aria-hidden />\n                  Search Help Center...\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconMessage aria-hidden />\n                  Send Feedback...\n                </CommandItem>\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconAt aria-hidden />\n                  Contact Support\n                </CommandItem>\n              </CommandGroup>\n\n              <CommandGroup heading=\"Keyboard Shortcuts\">\n                <CommandItem\n                  className=\"mx-2 rounded-lg py-2.5\"\n                  onSelect={() => setOpen(false)}\n                >\n                  <IconKeyboard aria-hidden />\n                  View Keyboard Shortcuts\n                  <KbdGroup className=\"ml-auto\">\n                    <Kbd>⌘</Kbd>\n                    <Kbd>/</Kbd>\n                  </KbdGroup>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"
    }
  ],
  "categories": [
    "command-menu"
  ]
}