{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "error2",
  "title": "404 With Site Search",
  "description": "Search-first 404 page: a controlled search field with a submit handler, plus a bordered list of suggested pages with titles, descriptions, and hover arrows.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "registry/error2/error2.tsx",
      "content": "\"use client\";\n\nimport { ArrowRight, Search } from \"lucide-react\";\nimport Link from \"next/link\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SuggestionLink {\n  title: string;\n  description?: string;\n  href: string;\n}\n\ninterface Error2Labels {\n  placeholder?: string;\n  submit?: string;\n  suggestions?: string;\n}\n\ninterface Error2Props {\n  code?: string;\n  heading?: string;\n  description?: string;\n  labels?: Error2Labels;\n  suggestions?: SuggestionLink[];\n  onSearch?: (query: string) => void;\n  className?: string;\n}\n\nexport const error2Demo: Error2Props = {\n  code: \"Error 404\",\n  heading: \"We could not find that page\",\n  description:\n    \"Search the site instead, or jump straight to one of the pages people land on most.\",\n  labels: {\n    placeholder: \"Search documentation, guides, and posts\",\n    submit: \"Search\",\n    suggestions: \"Suggested pages\",\n  },\n  suggestions: [\n    {\n      title: \"Getting started\",\n      description: \"Install the library and ship your first page\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Components\",\n      description: \"Every block, grouped by category\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Pricing\",\n      description: \"Plans, licensing, and what is included\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Support\",\n      description: \"Get help from a human within one business day\",\n      href: \"https://beste.co\",\n    },\n  ],\n};\n\nexport function Error2({\n  code,\n  heading,\n  description,\n  labels = {},\n  suggestions = [],\n  onSearch,\n  className,\n}: Error2Props) {\n  const { placeholder, submit, suggestions: suggestionsLabel } = labels;\n  const [query, setQuery] = React.useState(\"\");\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    onSearch?.(query.trim());\n  };\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-2xl px-4 md:px-6\">\n        <div className=\"text-center\">\n          {code && (\n            <p className=\"text-sm font-medium uppercase tracking-wider text-muted-foreground\">\n              {code}\n            </p>\n          )}\n\n          {heading && (\n            <h1 className=\"mt-4 text-balance text-3xl font-bold tracking-tight md:text-4xl\">\n              {heading}\n            </h1>\n          )}\n\n          {description && (\n            <p className=\"mt-4 text-balance text-base text-muted-foreground md:text-lg\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        <form onSubmit={handleSubmit} className=\"mt-8 flex flex-col gap-3 sm:flex-row\">\n          <div className=\"relative flex-1\">\n            <Search className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              placeholder={placeholder}\n              aria-label={placeholder}\n              className=\"h-10 pl-9\"\n            />\n          </div>\n          {submit && (\n            <Button type=\"submit\" size=\"lg\">\n              {submit}\n            </Button>\n          )}\n        </form>\n\n        {suggestions.length > 0 && (\n          <div className=\"mt-10\">\n            {suggestionsLabel && (\n              <p className=\"text-sm font-medium uppercase tracking-wider text-muted-foreground\">\n                {suggestionsLabel}\n              </p>\n            )}\n            <div className=\"mt-4 divide-y rounded-md border\">\n              {suggestions.map((suggestion, index) => (\n                <Link\n                  key={index}\n                  href={suggestion.href}\n                  className=\"group/error2 flex items-center justify-between gap-4 px-4 py-4 transition-colors hover:bg-muted\"\n                >\n                  <span>\n                    <span className=\"block text-base font-semibold text-foreground\">\n                      {suggestion.title}\n                    </span>\n                    {suggestion.description && (\n                      <span className=\"mt-1 block text-sm text-muted-foreground\">\n                        {suggestion.description}\n                      </span>\n                    )}\n                  </span>\n                  <ArrowRight className=\"size-4 shrink-0 text-muted-foreground transition-transform group-hover/error2:translate-x-0.5\" />\n                </Link>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/error2.tsx"
    }
  ],
  "type": "registry:block"
}