{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "help-center-search", "title": "Help Center Search", "description": "Cmd+K search dialog for help center articles. Keyboard-navigable with arrow keys.", "files": [ { "path": "registry/helpbase/components/search-dialog.tsx", "content": "\"use client\"\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { useRouter } from \"next/navigation\"\nimport type { SearchItem } from \"@/lib/search\"\n\ninterface SearchDialogProps {\n items: SearchItem[]\n}\n\nexport function SearchDialog({ items }: SearchDialogProps) {\n const [open, setOpen] = useState(false)\n const [query, setQuery] = useState(\"\")\n const [selectedIndex, setSelectedIndex] = useState(0)\n const inputRef = useRef(null)\n const listRef = useRef(null)\n const router = useRouter()\n\n // Cmd+K to open\n useEffect(() => {\n function onKeyDown(e: KeyboardEvent) {\n if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n e.preventDefault()\n setOpen((prev) => !prev)\n }\n if (e.key === \"Escape\") {\n setOpen(false)\n }\n }\n window.addEventListener(\"keydown\", onKeyDown)\n return () => window.removeEventListener(\"keydown\", onKeyDown)\n }, [])\n\n // Focus input when opening\n useEffect(() => {\n if (open) {\n setQuery(\"\")\n setSelectedIndex(0)\n // Small delay to let the dialog render\n requestAnimationFrame(() => inputRef.current?.focus())\n }\n }, [open])\n\n // Filter results\n const results = useMemo(() => {\n if (!query.trim()) return items\n const terms = query.toLowerCase().split(/\\s+/)\n return items.filter((item) => {\n const text = `${item.title} ${item.description} ${item.categoryTitle}`.toLowerCase()\n return terms.every((term) => text.includes(term))\n })\n }, [items, query])\n\n // Scroll selected item into view\n useEffect(() => {\n const container = listRef.current\n if (!container) return\n const selected = container.querySelector(\"[data-selected=true]\")\n if (selected) {\n selected.scrollIntoView({ block: \"nearest\" })\n }\n }, [selectedIndex])\n\n const navigate = useCallback(\n (href: string) => {\n setOpen(false)\n router.push(href)\n },\n [router]\n )\n\n function onKeyDown(e: React.KeyboardEvent) {\n if (e.key === \"ArrowDown\") {\n e.preventDefault()\n setSelectedIndex((i) => Math.min(i + 1, results.length - 1))\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault()\n setSelectedIndex((i) => Math.max(i - 1, 0))\n } else if (e.key === \"Enter\" && results[selectedIndex]) {\n e.preventDefault()\n navigate(results[selectedIndex].href)\n }\n }\n\n if (!open) return null\n\n return (\n <>\n {/* Backdrop */}\n setOpen(false)}\n />\n\n {/* Dialog */}\n
\n
\n {/* Search input */}\n
\n \n {\n setQuery(e.target.value)\n setSelectedIndex(0)\n }}\n onKeyDown={onKeyDown}\n className=\"h-12 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n />\n \n ESC\n \n
\n\n {/* Results */}\n
\n {results.length === 0 ? (\n
\n No results found for “{query}”\n
\n ) : (\n results.map((item, index) => (\n navigate(item.href)}\n onMouseEnter={() => setSelectedIndex(index)}\n className=\"flex w-full items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors data-[selected=true]:bg-muted\"\n >\n
\n \n
\n
\n
{item.title}
\n
\n {item.categoryTitle}\n ·\n {item.description}\n
\n
\n \n \n ))\n )}\n
\n\n {/* Footer */}\n
\n
\n \n ↑\n ↓\n navigate\n \n \n ↵\n open\n \n
\n {results.length} result{results.length !== 1 ? \"s\" : \"\"}\n
\n
\n
\n \n )\n}\n\nfunction SearchIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n )\n}\n\nfunction FileIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n )\n}\n\nfunction ReturnIcon({ className }: { className?: string }) {\n return (\n \n \n \n \n )\n}\n", "type": "registry:component", "target": "components/search-dialog.tsx" }, { "path": "registry/helpbase/components/search-trigger.tsx", "content": "\"use client\"\n\nexport function SearchTriggerHero() {\n return (\n {\n window.dispatchEvent(\n new KeyboardEvent(\"keydown\", {\n key: \"k\",\n metaKey: true,\n bubbles: true,\n })\n )\n }}\n className=\"group flex h-12 w-full items-center gap-3 rounded-xl border border-border bg-background px-4 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out hover:border-foreground/20 hover:shadow-md\"\n >\n \n \n \n \n \n Search for articles...\n \n \n \n )\n}\n", "type": "registry:component", "target": "components/search-trigger.tsx" }, { "path": "registry/helpbase/lib/search.ts", "content": "import { getAllArticles, getCategories } from \"./content\"\n\nexport interface SearchItem {\n title: string\n description: string\n category: string\n categoryTitle: string\n slug: string\n href: string\n}\n\nexport async function getSearchIndex(): Promise {\n const [articles, categories] = await Promise.all([\n getAllArticles(),\n getCategories(),\n ])\n\n const categoryMap = new Map(categories.map((c) => [c.slug, c.title]))\n\n return articles.map((article) => ({\n title: article.title,\n description: article.description,\n category: article.category,\n categoryTitle: categoryMap.get(article.category) ?? article.category,\n slug: article.slug,\n href: `/${article.category}/${article.slug}`,\n }))\n}\n", "type": "registry:lib", "target": "lib/search.ts" } ], "type": "registry:component" }