import * as React from "react"; import { AlertTriangle, BookOpen, Code2, Compass, LifeBuoy, Podcast, Sparkles, } from "lucide-react"; import { ErrorPageDocsCommandSearchFive } from "@/registry/error-page-docs-command-search-five/error-page-docs-command-search-five"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof ErrorPageDocsCommandSearchFive >; const commandGroups: ComponentProps["commandGroups"] = [ { id: "guides", label: "Guides", results: [ { id: "auth", label: "Authentication quickstart", description: "Create API keys and configure OAuth clients", href: "/docs/guides/authentication", icon: , shortcut: "G A", }, { id: "webhooks", label: "Webhooks handbook", description: "Retry semantics and signature verification", href: "/docs/guides/webhooks", icon: , }, ], }, { id: "references", label: "API references", results: [ { id: "events", label: "Events API", description: "Stream engagement events with replay support", href: "/docs/api/events", icon: , }, ], }, ]; const docsSections: ComponentProps["docsSections"] = [ { id: "getting-started", label: "Getting started", description: "Start building with our SDKs and quickstarts.", links: [ { id: "quickstart", label: "Next.js quickstart", description: "Install SDK, authenticate, and render first component", href: "/docs/getting-started/nextjs", icon: , badge: { label: "Updated" }, }, { id: "cli", label: "CLI toolbelt", description: "Generate tokens, seed data, and manage environments", href: "/docs/getting-started/cli", icon: , }, ], }, { id: "sdk", label: "SDKs", links: [ { id: "react", label: "React SDK", description: "Hooks, providers, and suspense-ready helpers", href: "/docs/sdk/react", icon: , }, { id: "android", label: "Android SDK", description: "Jetpack Compose bindings and offline cache", href: "/docs/sdk/android", }, ], }, ]; const resources: ComponentProps["resources"] = [ { id: "onboarding", title: "Developer onboarding path", description: "Sequence of lessons and sample apps to ship your first integration.", href: "/docs/guides/onboarding", icon: , }, { id: "status", title: "API status page", description: "Monitor uptime and incident history for all endpoints.", href: "/status", icon: , }, { id: "community", title: "Community office hours", description: "Join weekly calls or catch the replay podcast.", href: "/community/office-hours", icon: , }, ]; export function ErrorPageDocsCommandSearchFiveDemo() { const [reports, setReports] = React.useState([]); return (

Command-first docs recovery

Pair a fuzzy search palette with documentation tree and curated resources so developers recover immediately after a missing page.

, }} commandGroups={commandGroups} docsSections={docsSections} resources={resources} reportBrokenLink={{ title: "Report broken docs link", description: "Tell us what you expected to find here.", submitLabel: "Send", successTitle: "Report captured", successDescription: "We’ll follow up once the doc is restored.", onSubmit: async (message) => { await new Promise((resolve) => setTimeout(resolve, 650)); setReports((prev) => [...prev, message]); }, }} localStorageKey="demo-docs-command-last-query" />

Reports submitted: {reports.length}

); } ErrorPageDocsCommandSearchFiveDemo.displayName = "ErrorPageDocsCommandSearchFiveDemo"; export default ErrorPageDocsCommandSearchFiveDemo;

Simple