{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "search-2",
  "title": "Search Results Page",
  "description": "Search results page with a query field, live result count, empty state, and result cards carrying a type badge, snippet, and last updated date.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "input"
  ],
  "files": [
    {
      "path": "registry/blocks/search/2/search-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Input } from \"@/components/ui/input\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Result = {\n  title: string\n  snippet: string\n  type: string\n  updated: string\n}\n\nconst results: Result[] = [\n  {\n    title: \"Getting started with Acme\",\n    snippet:\n      \"Install the CLI, create your first project, and ship a page in under five minutes with copy-paste blocks.\",\n    type: \"Docs\",\n    updated: \"Jun 12, 2026\",\n  },\n  {\n    title: \"Authentication and sessions\",\n    snippet:\n      \"Connect a provider, protect your routes, and read the current session on the server or the client.\",\n    type: \"Guide\",\n    updated: \"May 30, 2026\",\n  },\n  {\n    title: \"Theming and design tokens\",\n    snippet:\n      \"Every block is theme-aware. Override semantic tokens once and every component updates automatically.\",\n    type: \"Docs\",\n    updated: \"Jun 18, 2026\",\n  },\n  {\n    title: \"Deploying to production\",\n    snippet:\n      \"A checklist for going live: environment variables, build caching, and zero-downtime releases.\",\n    type: \"Guide\",\n    updated: \"Jun 02, 2026\",\n  },\n]\n\nexport default function SearchBlock() {\n  const [query, setQuery] = React.useState(\"\")\n\n  const q = query.trim().toLowerCase()\n  const filtered = q\n    ? results.filter((r) =>\n        `${r.title} ${r.snippet} ${r.type}`.toLowerCase().includes(q)\n      )\n    : results\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <div className=\"flex w-full max-w-xl flex-col gap-5\">\n        <div className=\"relative\">\n          <IconPlaceholder\n            lucide=\"Search\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlass\"\n            remixicon=\"RiSearchLine\"\n            className=\"absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground\"\n            aria-hidden=\"true\"\n          />\n          <Input\n            type=\"search\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search the docs...\"\n            aria-label=\"Search\"\n            className=\"h-11 bg-background pl-10\"\n          />\n        </div>\n\n        <p className=\"text-sm text-muted-foreground tabular-nums\">\n          {filtered.length} {filtered.length === 1 ? \"Result\" : \"Results\"}\n        </p>\n\n        {filtered.length === 0 ? (\n          <div className=\"rounded-lg border border-border bg-background px-4 py-12 text-center text-sm text-muted-foreground\">\n            No results for &ldquo;{query}&rdquo;.\n          </div>\n        ) : (\n          <ul className=\"flex flex-col gap-3\">\n            {filtered.map((result) => (\n              <li\n                key={result.title}\n                className=\"flex flex-col gap-2 rounded-lg border border-border bg-background p-4 transition-colors hover:border-muted-foreground/40\"\n              >\n                <div className=\"flex items-center justify-between gap-3\">\n                  <Badge variant=\"secondary\">{result.type}</Badge>\n                  <span className=\"text-xs text-muted-foreground tabular-nums\">\n                    Updated {result.updated}\n                  </span>\n                </div>\n                <a\n                  href=\"#\"\n                  className=\"text-sm font-semibold text-foreground hover:underline\"\n                >\n                  {result.title}\n                </a>\n                <p className=\"text-sm/relaxed text-muted-foreground\">\n                  {result.snippet}\n                </p>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/search-2.tsx"
    }
  ],
  "meta": {
    "height": "818px",
    "tier": "free"
  },
  "categories": [
    "search"
  ],
  "type": "registry:block"
}