{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/logo","@efferd/portal","button","@efferd/use-scroll"],"name":"header-1","description":"Responsive sticky header with scroll blur effect, animated mobile menu, and adaptive navigation links.","categories":["header"],"files":[{"path":"registry/blocks/header/1/header.tsx","type":"registry:component","content":"\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { Logo } from \"@/components/logo\";\nimport { useScroll } from \"@/hooks/use-scroll\";\nimport { Button } from \"@/components/ui/button\";\nimport { MobileNav } from \"@/components/mobile-nav\";\n\nexport const navLinks = [\n\t{\n\t\tlabel: \"Features\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\tlabel: \"Pricing\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\tlabel: \"About\",\n\t\thref: \"#\",\n\t},\n];\n\nexport function Header() {\n\tconst scrolled = useScroll(10);\n\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\"sticky top-0 z-50 w-full border-transparent border-b\", {\n\t\t\t\t\"border-border bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/50\":\n\t\t\t\t\tscrolled,\n\t\t\t})}\n\t\t>\n\t\t\t<nav className=\"mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-4\">\n\t\t\t\t<a\n\t\t\t\t\tclassName=\"rounded-md p-2 hover:bg-muted dark:hover:bg-muted/50\"\n\t\t\t\t\thref=\"#\"\n\t\t\t\t>\n\t\t\t\t\t<Logo className=\"h-4\" />\n\t\t\t\t</a>\n\t\t\t\t<div className=\"hidden items-center gap-2 md:flex\">\n\t\t\t\t\t{navLinks.map((link) => (\n\t\t\t\t\t\t<Button asChild key={link.label} size=\"sm\" variant=\"ghost\">\n\t\t\t\t\t\t\t<a href={link.href}>{link.label}</a>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t))}\n\t\t\t\t\t<Button size=\"sm\" variant=\"outline\">\n\t\t\t\t\t\tSign In\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button size=\"sm\">Get Started</Button>\n\t\t\t\t</div>\n\t\t\t\t<MobileNav />\n\t\t\t</nav>\n\t\t</header>\n\t);\n}\n"},{"path":"registry/blocks/header/1/mobile-nav.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal, PortalBackdrop } from \"@/components/portal\";\nimport { navLinks } from \"@/components/header\";\n\nexport function MobileNav() {\n\tconst [open, setOpen] = React.useState(false);\n\n\treturn (\n\t\t<div className=\"md:hidden\">\n\t\t\t<Button\n\t\t\t\taria-controls=\"mobile-menu\"\n\t\t\t\taria-expanded={open}\n\t\t\t\taria-label=\"Toggle menu\"\n\t\t\t\tclassName=\"md:hidden\"\n\t\t\t\tonClick={() => setOpen(!open)}\n\t\t\t\tsize=\"icon\"\n\t\t\t\tvariant=\"outline\"\n\t\t\t>\n\t\t\t\t{open ? (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\tclassName=\"size-4.5\"\n\t\t\t\t\t\thugeicons=\"Cancel01Icon\"\n\t\t\t\t\t\tlucide=\"XIcon\"\n\t\t\t\t\t\tphosphor=\"XIcon\"\n\t\t\t\t\t\tremixicon=\"RiCloseLine\"\n\t\t\t\t\t\ttabler=\"IconX\"\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\tclassName=\"size-4.5\"\n\t\t\t\t\t\thugeicons=\"Menu01Icon\"\n\t\t\t\t\t\tlucide=\"MenuIcon\"\n\t\t\t\t\t\tphosphor=\"ListIcon\"\n\t\t\t\t\t\tremixicon=\"RiMenuLine\"\n\t\t\t\t\t\ttabler=\"IconMenu2\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Button>\n\t\t\t{open && (\n\t\t\t\t<Portal className=\"top-14\" id=\"mobile-menu\">\n\t\t\t\t\t<PortalBackdrop />\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"data-[slot=open]:zoom-in-97 ease-out data-[slot=open]:animate-in\",\n\t\t\t\t\t\t\t\"size-full p-4\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tdata-slot={open ? \"open\" : \"closed\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"grid gap-y-2\">\n\t\t\t\t\t\t\t{navLinks.map((link) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\t\tclassName=\"justify-start\"\n\t\t\t\t\t\t\t\t\tkey={link.label}\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<a href={link.href}>{link.label}</a>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"mt-12 flex flex-col gap-2\">\n\t\t\t\t\t\t\t<Button className=\"w-full\" variant=\"outline\">\n\t\t\t\t\t\t\t\tSign In\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button className=\"w-full\">Get Started</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Portal>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"}]}