{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-header-5",
  "title": "Header With Search Toolbar",
  "description": "List view page header with a title, primary action, and a toolbar of search input, status and sort selects, and a list or grid view toggle.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "select",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/page-header/5/page-header-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function PageHeaderBlock() {\n  const [view, setView] = useState<\"grid\" | \"list\">(\"list\")\n\n  return (\n    <section className=\"w-full bg-background px-6 py-10 text-foreground\">\n      <div className=\"mx-auto w-full max-w-4xl\">\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"flex flex-col gap-1\">\n            <h1 className=\"font-heading text-2xl font-bold tracking-tight\">\n              Projects\n            </h1>\n            <p className=\"text-sm text-muted-foreground\">\n              Manage and track every project across your workspace.\n            </p>\n          </div>\n          <Button className=\"w-full sm:w-auto\">\n            <IconPlaceholder\n              lucide=\"Plus\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"Plus\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n              aria-hidden=\"true\"\n            />\n            New project\n          </Button>\n        </div>\n\n        <Separator className=\"my-5\" />\n\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"relative w-full sm:max-w-xs\">\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlass\"\n              remixicon=\"RiSearchLine\"\n              className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\"\n              aria-hidden=\"true\"\n            />\n            <Input\n              type=\"search\"\n              placeholder=\"Search projects...\"\n              className=\"pl-8\"\n              aria-label=\"Search projects\"\n            />\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Select defaultValue=\"Active\">\n              <SelectTrigger className=\"w-32\" aria-label=\"Filter by status\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"All\">All</SelectItem>\n                <SelectItem value=\"Active\">Active</SelectItem>\n                <SelectItem value=\"Archived\">Archived</SelectItem>\n              </SelectContent>\n            </Select>\n            <Select defaultValue=\"Most recent\">\n              <SelectTrigger className=\"w-36\" aria-label=\"Sort by\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"Most recent\">Most recent</SelectItem>\n                <SelectItem value=\"Name\">Name</SelectItem>\n                <SelectItem value=\"Owner\">Owner</SelectItem>\n              </SelectContent>\n            </Select>\n            <div className=\"flex overflow-hidden rounded-lg border border-border\">\n              <button\n                type=\"button\"\n                aria-label=\"List view\"\n                aria-pressed={view === \"list\"}\n                onClick={() => setView(\"list\")}\n                className={cn(\n                  \"flex size-8 items-center justify-center transition-colors\",\n                  view === \"list\"\n                    ? \"bg-foreground text-background\"\n                    : \"text-muted-foreground hover:bg-muted/60\"\n                )}\n              >\n                <IconPlaceholder\n                  lucide=\"List\"\n                  tabler=\"IconList\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ListBullets\"\n                  remixicon=\"RiListUnordered\"\n                  className=\"size-4\"\n                  aria-hidden=\"true\"\n                />\n              </button>\n              <button\n                type=\"button\"\n                aria-label=\"Grid view\"\n                aria-pressed={view === \"grid\"}\n                onClick={() => setView(\"grid\")}\n                className={cn(\n                  \"flex size-8 items-center justify-center border-l border-border transition-colors\",\n                  view === \"grid\"\n                    ? \"bg-foreground text-background\"\n                    : \"text-muted-foreground hover:bg-muted/60\"\n                )}\n              >\n                <IconPlaceholder\n                  lucide=\"Grid\"\n                  tabler=\"IconLayoutGrid\"\n                  hugeicons=\"GridIcon\"\n                  phosphor=\"GridFour\"\n                  remixicon=\"RiGridFill\"\n                  className=\"size-4\"\n                  aria-hidden=\"true\"\n                />\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/page-header-5.tsx"
    }
  ],
  "meta": {
    "height": "219px",
    "tier": "free"
  },
  "categories": [
    "page-header"
  ],
  "type": "registry:block"
}