{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-menu-03",
  "type": "registry:block",
  "title": "Command Menu with Documentation Search",
  "description": "A command menu with documentation search block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "command",
    "dialog",
    "kbd"
  ],
  "dependencies": [
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "content/components/command-menu/command-menu-03.tsx",
      "type": "registry:component",
      "target": "components/command-menu-03.tsx",
      "content": "'use client';\n\nimport { IconArrowRight, IconCornerDownLeft } from '@tabler/icons-react';\nimport { useRouter } from 'next/navigation';\nimport { useCallback, 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 } from '@/components/ui/kbd';\n\nconst navItems = [\n  { href: '/', label: 'Home', keywords: ['home', 'main', 'index'] },\n  {\n    href: '/dashboard',\n    label: 'Dashboard',\n    keywords: ['dashboard', 'overview'],\n  },\n  {\n    href: '/settings',\n    label: 'Settings',\n    keywords: ['settings', 'preferences'],\n  },\n];\n\nconst pageGroups = [\n  {\n    name: 'Getting Started',\n    pages: [\n      {\n        name: 'Introduction',\n        href: '/docs/introduction',\n        keywords: ['intro', 'start'],\n      },\n      {\n        name: 'Installation',\n        href: '/docs/installation',\n        keywords: ['install', 'setup'],\n      },\n      {\n        name: 'Quick Start',\n        href: '/docs/quick-start',\n        keywords: ['quick', 'begin'],\n      },\n    ],\n  },\n  {\n    name: 'Utilities',\n    pages: [\n      {\n        name: 'Typography',\n        href: '/docs/utilities/typography',\n        keywords: ['text', 'font'],\n      },\n      {\n        name: 'Colors',\n        href: '/docs/utilities/colors',\n        keywords: ['color', 'theme'],\n      },\n      {\n        name: 'Spacing',\n        href: '/docs/utilities/spacing',\n        keywords: ['margin', 'padding'],\n      },\n    ],\n  },\n];\n\nconst colorGroups = [\n  {\n    name: 'Neutral',\n    colors: [\n      {\n        name: 'Neutral 50',\n        className: 'neutral-50',\n        value: 'oklch(0.985 0 0)',\n      },\n      {\n        name: 'Neutral 100',\n        className: 'neutral-100',\n        value: 'oklch(0.97 0 0)',\n      },\n      {\n        name: 'Neutral 200',\n        className: 'neutral-200',\n        value: 'oklch(0.922 0 0)',\n      },\n      {\n        name: 'Neutral 500',\n        className: 'neutral-500',\n        value: 'oklch(0.556 0 0)',\n      },\n      {\n        name: 'Neutral 900',\n        className: 'neutral-900',\n        value: 'oklch(0.205 0 0)',\n      },\n    ],\n  },\n  {\n    name: 'Blue',\n    colors: [\n      {\n        name: 'Blue 50',\n        className: 'blue-50',\n        value: 'oklch(0.97 0.014 254.604)',\n      },\n      {\n        name: 'Blue 500',\n        className: 'blue-500',\n        value: 'oklch(0.623 0.214 259.815)',\n      },\n      {\n        name: 'Blue 600',\n        className: 'blue-600',\n        value: 'oklch(0.546 0.245 262.881)',\n      },\n    ],\n  },\n];\n\nexport function CommandMenu03() {\n  const router = useRouter();\n  const [open, setOpen] = useState(true);\n\n  const copyToClipboard = useCallback((text: string) => {\n    navigator.clipboard.writeText(text);\n  }, []);\n\n  const runCommand = useCallback((command: () => unknown) => {\n    setOpen(false);\n    command();\n  }, []);\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {\n        if (\n          (e.target instanceof HTMLElement && e.target.isContentEditable) ||\n          e.target instanceof HTMLInputElement ||\n          e.target instanceof HTMLTextAreaElement ||\n          e.target instanceof HTMLSelectElement\n        ) {\n          return;\n        }\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        <DialogContent className=\"rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800\">\n          <DialogHeader className=\"sr-only\">\n            <DialogTitle>Search documentation...</DialogTitle>\n            <DialogDescription>\n              Search for a command to run...\n            </DialogDescription>\n          </DialogHeader>\n\n          <Command className=\"rounded-none bg-transparent **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:h-9! **:data-[slot=command-input]:h-9! **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border **:data-[slot=command-input-wrapper]:border-input **:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input]:py-0\">\n            <CommandInput placeholder=\"Search documentation...\" />\n            <CommandList className=\"no-scrollbar min-h-80 scroll-pt-2 scroll-pb-1.5\">\n              <CommandEmpty className=\"py-12 text-center text-muted-foreground text-sm\">\n                No results found.\n              </CommandEmpty>\n\n              {navItems.length > 0 && (\n                <CommandGroup\n                  className=\"p-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!\"\n                  heading=\"Pages\"\n                >\n                  {navItems.map((item) => (\n                    <CommandItem\n                      className=\"h-9 rounded-md border border-transparent px-3! font-medium hover:border-input hover:bg-input/50\"\n                      key={item.href}\n                      keywords={item.keywords}\n                      onSelect={() => {\n                        runCommand(() => router.push(item.href));\n                      }}\n                      value={`Navigation ${item.label}`}\n                    >\n                      <IconArrowRight aria-hidden=\"true\" className=\"size-4\" />\n                      {item.label}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n\n              {pageGroups.map((group) => (\n                <CommandGroup\n                  className=\"p-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!\"\n                  heading={group.name}\n                  key={group.name}\n                >\n                  {group.pages.map((page) => {\n                    const isComponent = page.href.includes('/components/');\n                    return (\n                      <CommandItem\n                        className=\"h-9 rounded-md border border-transparent px-3! font-medium hover:border-input hover:bg-input/50\"\n                        key={page.href}\n                        keywords={page.keywords}\n                        onSelect={() => {\n                          runCommand(() => router.push(page.href));\n                        }}\n                        value={`${group.name} ${page.name}`}\n                      >\n                        {isComponent ? (\n                          <div className=\"aspect-square size-4 rounded-full border border-muted-foreground border-dashed\" />\n                        ) : (\n                          <IconArrowRight\n                            aria-hidden=\"true\"\n                            className=\"size-4\"\n                          />\n                        )}\n                        {page.name}\n                      </CommandItem>\n                    );\n                  })}\n                </CommandGroup>\n              ))}\n\n              {colorGroups.map((colorGroup) => (\n                <CommandGroup\n                  className=\"p-0! **:[[cmdk-group-heading]]:p-3!\"\n                  heading={colorGroup.name}\n                  key={colorGroup.name}\n                >\n                  {colorGroup.colors.map((color) => (\n                    <CommandItem\n                      className=\"h-9 rounded-md border border-transparent px-3! font-medium hover:border-input hover:bg-input/50\"\n                      key={color.className}\n                      keywords={['color', color.name, color.className]}\n                      onSelect={() => {\n                        runCommand(() => copyToClipboard(color.value));\n                      }}\n                      value={color.className}\n                    >\n                      <div\n                        className=\"aspect-square size-4 rounded-sm border\"\n                        style={{ backgroundColor: color.value }}\n                      />\n                      {color.className}\n                      <span className=\"ml-auto font-mono font-normal text-muted-foreground text-xs tabular-nums\">\n                        {color.value}\n                      </span>\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              ))}\n            </CommandList>\n          </Command>\n\n          <div className=\"absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 font-medium text-muted-foreground text-xs dark:border-t-neutral-700 dark:bg-neutral-800\">\n            <Kbd>\n              <IconCornerDownLeft aria-hidden=\"true\" className=\"size-3\" />\n            </Kbd>\n            Select\n          </div>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"
    }
  ],
  "categories": [
    "command-menu"
  ]
}