{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-centered-logo",
  "title": "Header — Centered Logo",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/header-centered-logo/HeaderCenteredLogo.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Compass, Menu, ShoppingBag, User } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst leftLinks = [\n  { label: 'Collections', href: '#collections' },\n  { label: 'New in', href: '#new' },\n  { label: 'Studio', href: '#studio' },\n]\nconst rightLinks = [\n  { label: 'Journal', href: '#journal' },\n  { label: 'Stockists', href: '#stockists' },\n  { label: 'Contact', href: '#contact' },\n]\n\nconst linkClass =\n  'text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none'\n\nexport function HeaderCenteredLogo() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <header data-slot=\"header-centered-logo\" className=\"border-border bg-background border-b\">\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center px-6\">\n        {/* Equal-basis flanks keep the wordmark optically centred regardless of\n            how long the link labels are. */}\n        <nav className=\"hidden flex-1 basis-0 items-center gap-1 lg:flex\" aria-label=\"Primary left\">\n          {leftLinks.map((link) => (\n            <a key={link.href} href={link.href} className={linkClass}>\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"lg:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" className=\"w-72\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              {[...leftLinks, ...rightLinks].map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n            <Separator className=\"my-5\" />\n            <Button className=\"w-full\">Account</Button>\n          </SheetContent>\n        </Sheet>\n\n        <a\n          href=\"#top\"\n          className=\"mx-auto flex items-center gap-2 text-base font-semibold tracking-[0.18em] uppercase lg:mx-6\"\n        >\n          <Compass className=\"text-primary size-4\" aria-hidden=\"true\" />\n          Halden\n        </a>\n\n        <nav className=\"hidden flex-1 basis-0 items-center justify-end gap-1 lg:flex\" aria-label=\"Primary right\">\n          {rightLinks.map((link) => (\n            <a key={link.href} href={link.href} className={linkClass}>\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <div className=\"flex items-center gap-1 lg:ml-4\">\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Account\">\n            <User className=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Bag\">\n            <ShoppingBag className=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeaderCenteredLogo.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/sheet.json"
  ],
  "description": "Symmetrical navbar with the wordmark centred between two nav halves, a utility cluster on the right, and a mobile layout that collapses the split into a single sheet trigger.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}