{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"header-2","type":"registry:block","title":"Header 2","description":"","dependencies":["lucide-react","motion"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/button.json","https://www.diarmuradi.com/r/styles/base-nova/icons.json","https://www.diarmuradi.com/r/styles/base-nova/separator.json"],"files":[{"path":"header.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport Link from \"next/link\"\nimport { AnimatePresence, motion } from \"motion/react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Icons } from \"@/components/icons\"\nimport { EqualIcon, XIcon } from 'lucide-react'\n\nconst NAV_LINKS = [\n  { label: \"Features\", href: \"#features\" },\n  { label: \"Pricing\", href: \"#pricing\" },\n  { label: \"About\", href: \"#about\" },\n  { label: \"Blog\", href: \"#blog\" },\n]\n\nexport function SiteHeader() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full justify-center px-4\">\n      <nav className=\"flex w-full max-w-md flex-col gap-2 sm:h-14 sm:max-w-fit sm:flex-row sm:items-center sm:gap-2 sm:px-2\">\n        <div className=\"flex h-14 w-full items-center justify-between sm:w-auto sm:shrink-0\">\n          <Link\n            href=\"#\"\n            className=\"flex size-10 shrink-0 items-center justify-center rounded-xl\"\n          >\n            <Icons.Logo className=\"size-6 text-foreground\" />\n          </Link>\n\n          <Button\n            onClick={() => setIsOpen(!isOpen)}\n            variant=\"ghost\"\n            className=\"size-10 shrink-0 rounded-xl text-foreground sm:hidden *:[&>svg]:size-5\"\n            aria-label={isOpen ? \"Close Menu\" : \"Open Menu\"}\n            aria-expanded={isOpen}\n          >\n            {isOpen ? <XIcon /> : <EqualIcon />}\n          </Button>\n        </div>\n\n        <div className=\"hidden h-5 items-center justify-center sm:flex\">\n          <Separator orientation=\"vertical\" className=\"bg-border/50\" />\n        </div>\n\n        <div className=\"group hidden items-center gap-1 sm:flex\">\n          {NAV_LINKS.map((link) => (\n            <Button\n              key={link.href}\n              variant=\"ghost\"\n              className=\"h-9 bg-transparent text-muted-foreground shadow-none transition-colors duration-300 ease-in-out group-has-[a:hover]:text-muted-foreground/50 hover:bg-transparent hover:text-foreground hover:group-has-[a:hover]:text-foreground focus:bg-transparent focus:text-foreground\"\n              render={<Link href={link.href} />}\n              nativeButton={false}\n            >\n              {link.label}\n            </Button>\n          ))}\n        </div>\n\n        <div className=\"hidden h-5 items-center justify-center sm:flex\">\n          <Separator orientation=\"vertical\" className=\"bg-border/50\" />\n        </div>\n\n        <div className=\"hidden shrink-0 items-center gap-1 sm:flex\">\n          <Button\n            variant=\"secondary\"\n            size=\"lg\"\n            className=\"h-10 rounded-l-full rounded-r-lg px-4\"\n          >\n            Sign up\n          </Button>\n          <Button size=\"lg\" className=\"h-10 rounded-l-none rounded-r-lg px-4\">\n            Sign in\n          </Button>\n        </div>\n\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              initial={{ opacity: 0, y: -8 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -8 }}\n              transition={{ duration: 0.3, ease: \"easeInOut\" }}\n              className=\"flex w-full flex-col gap-2 rounded-3xl bg-popover p-2 shadow-elevated-sm sm:hidden\"\n            >\n              <div className=\"flex flex-col gap-1\">\n                {NAV_LINKS.map((link) => (\n                  <Button\n                    key={link.href}\n                    variant=\"ghost\"\n                    className=\"h-11 w-full justify-start rounded-2xl px-4 text-muted-foreground hover:bg-transparent hover:text-foreground\"\n                    onClick={() => setIsOpen(false)}\n                    render={<Link href={link.href} />}\n                    nativeButton={false}\n                  >\n                    {link.label}\n                  </Button>\n                ))}\n              </div>\n\n              <Separator className=\"bg-border/50\" />\n\n              <div className=\"grid grid-cols-2 gap-1\">\n                <Button\n                  variant=\"secondary\"\n                  size=\"lg\"\n                  className=\"h-11 w-full min-w-0 rounded-l-2xl rounded-r-lg\"\n                  onClick={() => setIsOpen(false)}\n                >\n                  Sign up\n                </Button>\n                <Button\n                  size=\"lg\"\n                  className=\"h-11 w-full min-w-0 rounded-l-none rounded-r-2xl\"\n                  onClick={() => setIsOpen(false)}\n                >\n                  Sign in\n                </Button>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </nav>\n    </header>\n  )\n}","target":"components/header.tsx"}]}