{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-demo",
  "title": "Header Demo",
  "description": "Demo showing Header component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/header",
    "https://systaliko-ui.vercel.app/r/animated-menu",
    "https://systaliko-ui.vercel.app/r/use-mobile"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/header/index.tsx",
      "content": "'use client';\nimport { useIsMobile } from '@/hooks/use-mobile';\nimport {\n  AnimatedMenu,\n  AnimatedMenuButton,\n  AnimatedMenuButtonLabel,\n  AnimatedMenuButtonToggleIcon,\n  AnimatedMenuItem,\n  AnimatedMenuList,\n  CloseAnimatedMenu,\n} from '@/components/systaliko-ui/blocks/animated-menu';\nimport { Header, HeaderLogo } from '@/components/systaliko-ui/blocks/header';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\nimport { Variants } from 'motion';\nimport Link from 'next/link';\n\nconst nav_links = [\n  {\n    id: 'nav-link-about',\n    label: 'About',\n    href: '#',\n  },\n  {\n    id: 'nav-link-features',\n    label: 'Features',\n    href: '#',\n  },\n  {\n    id: 'nav-link-pricing',\n    label: 'Pricing',\n    href: '#',\n  },\n  {\n    id: 'nav-link-faq',\n    label: 'FAQ',\n    href: '#',\n  },\n  {\n    id: 'nav-link-contact',\n    label: 'Contact',\n    href: '#',\n  },\n];\nconst nav_socials = [\n  {\n    id: 'nav-social-x',\n    label: 'x',\n    href: 'https://x.com',\n  },\n  {\n    id: 'nav-social-instagram',\n    label: 'Instagram',\n    href: 'https://instagram.com',\n  },\n  {\n    id: 'nav-social-linkedin',\n    label: 'LinkedIn',\n    href: 'https://linkedin.com',\n  },\n];\nconst menu_variants = {\n  open: {\n    width: 320,\n    height: 380,\n    transition: { duration: 0.75, ease: [0.76, 0, 0.24, 1] },\n  },\n  close: {\n    width: 320,\n    height: 40,\n    transition: { duration: 0.75, delay: 0.2, ease: [0.76, 0, 0.24, 1] },\n  },\n} as Variants;\n\nconst header_styles =\n  'bg-primary/95 text-primary-foreground backdrop-blur ring rounded-md shadow-2xs p-1.5';\nconst NavMobile = () => {\n  return (\n    <AnimatedMenu>\n      <AnimatedMenuButton className=\"text-primary-foreground h-10\">\n        <AnimatedMenuButtonToggleIcon />\n        <AnimatedMenuButtonLabel />\n      </AnimatedMenuButton>\n      <AnimatedMenuList\n        layout\n        className={header_styles}\n        variants={menu_variants}\n      >\n        <div className=\"pt-12 size-full flex flex-col justify-evenly \">\n          <div className=\"*:transition-opacity *:duration-200 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none\">\n            {nav_links.map((navLink, i) => (\n              <AnimatedMenuItem\n                key={navLink.id}\n                className=\"perspective-dramatic perspective-origin-bottom\"\n                order={i}\n              >\n                <CloseAnimatedMenu>\n                  <Link\n                    className=\"block text-sm font-medium py-2 px-1\"\n                    href={navLink.href}\n                    title={navLink.label}\n                    aria-label={`navigate to ${navLink.label}`}\n                  >\n                    {navLink.label}\n                  </Link>\n                </CloseAnimatedMenu>\n              </AnimatedMenuItem>\n            ))}\n          </div>\n          <div className=\"flex gap-3 *:transition-blur *:duration-200 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none\">\n            {nav_socials.map((navSocial, i) => (\n              <AnimatedMenuItem key={navSocial.id} order={i + nav_links.length}>\n                <CloseAnimatedMenu>\n                  <Link\n                    className=\"p-1 font-medium text-xs opacity-75 hover:opacity-100\"\n                    href={navSocial.href}\n                    title={navSocial.label}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    aria-label={`navigate to ${navSocial.label}`}\n                  >\n                    {navSocial.label}\n                  </Link>\n                </CloseAnimatedMenu>\n              </AnimatedMenuItem>\n            ))}\n          </div>\n          <AnimatedMenuItem order={nav_links.length + nav_socials.length}>\n            <Button variant={'secondary'} size={'sm'}>\n              Contact us\n            </Button>\n          </AnimatedMenuItem>\n        </div>\n      </AnimatedMenuList>\n    </AnimatedMenu>\n  );\n};\nconst NavDesktop = () => {\n  return (\n    <nav className=\"flex justify-between  gap-2 items-center flex-1\">\n      <ul className=\"flex-1 flex justify-center  list-none *:transition-opacity *:duration-200 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none\">\n        {nav_links.map((navLink) => (\n          <Link\n            key={navLink.id}\n            className=\"font-medium text-xs p-2\"\n            href={navLink.href}\n            title={navLink.label}\n            aria-label={`navigate to ${navLink.label}`}\n          >\n            {navLink.label}\n          </Link>\n        ))}\n      </ul>\n\n      <Button variant={'secondary'} size={'sm'}>\n        Contact us\n      </Button>\n    </nav>\n  );\n};\n\nexport function HeaderDemo() {\n  const isMobile = useIsMobile(980);\n\n  return (\n    <div className=\"h-[180vh]\">\n      <Header\n        className={`\n          sticky top-2 left-0 w-xs  mx-auto z-999  text-primary-foreground\n          min-[980px]:w-10/12 min-[980px]:bg-primary/95 min-[980px]:backdrop-blur min-[980px]:ring min-[980px]:rounded-md min-[980px]:shadow-2xs min-[980px]:p-1.5\n        `}\n      >\n        <HeaderLogo className=\"relative py-0.5 px-2 z-999\">\n          <span className=\"font-bold text-sm\">systaliko ui</span>\n        </HeaderLogo>\n\n        {isMobile ? <NavMobile /> : <NavDesktop />}\n      </Header>\n      <div className=\"w-4/5 mx-auto text-center h-[50vh] place-content-center\">\n        <h2 className=\"text-2xl font-semibold text-balance\">\n          Scroll down 👇🏻 to hide header, scroll up ☝️ to show it again. resize\n          ↔️ to check responsivity.\n        </h2>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/blocks/header.tsx"
    }
  ],
  "type": "registry:block"
}