{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-menu-demo",
  "title": "Animated Menu Demo",
  "description": "Demo showing animated menu component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/animated-menu"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/animated-menu/index.tsx",
      "content": "import {\n  AnimatedMenu,\n  AnimatedMenuButton,\n  AnimatedMenuButtonToggleIcon,\n  AnimatedMenuButtonLabel,\n  AnimatedMenuList,\n  AnimatedMenuItem,\n} from '@/components/systaliko-ui/blocks/animated-menu';\nimport Link from 'next/link';\n\nconst menuItems = [\n  {\n    title: 'Home',\n    href: '/#home',\n  },\n  {\n    title: 'About',\n    href: '/#about',\n  },\n  {\n    title: 'Services',\n    href: '/#Services',\n  },\n  {\n    title: 'Portfolio',\n    href: '/portfolio',\n  },\n  {\n    title: 'Contact',\n    href: '/contact',\n  },\n];\nconst socialLinks = [\n  {\n    title: 'Github',\n    href: 'https://github.com/YoucefBnm/',\n  },\n  {\n    title: 'Linkedin',\n    href: 'https://www.linkedin.com/in/',\n  },\n  {\n    title: 'X',\n    href: 'https://x.com/lbnm_yussef',\n  },\n  {\n    title: '21st',\n    href: 'https://21st.dev/community/YoucefBnm',\n  },\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: 48,\n    transition: { duration: 0.75, delay: 0.2, ease: [0.76, 0, 0.24, 1] },\n  },\n} as const;\nexport function AnimatedMenuDemo() {\n  return (\n    <div className=\"self-start h-screen w-full z-[999] flex items-start justify-between px-8 \">\n      <div className=\"mt-4 w-xs mx-auto max-w-full flex justify-between items-center gap-4\">\n        <span className=\"relative z-999 inline-block px-2 text-primary-foreground font-bold\">\n          systaliko\n        </span>\n        <AnimatedMenu>\n          <AnimatedMenuButton className=\"h-12 text-primary-foreground\">\n            <AnimatedMenuButtonToggleIcon />\n            <AnimatedMenuButtonLabel />\n          </AnimatedMenuButton>\n          <AnimatedMenuList\n            variants={menu_variants}\n            className=\"bg-primary ring-2 ring-black shadow text-primary-foreground\"\n          >\n            <div className=\"pt-14 pb-8 flex flex-col px-6 justify-evenly gap-6 items-start size-full\">\n              <div className=\"flex flex-col items-start gap-4 *:transition-blur *:duration-300 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none\">\n                {menuItems.map((item, i) => (\n                  <AnimatedMenuItem key={i} order={i}>\n                    <Link\n                      className=\"text-sm font-medium opacity-80 hover:opacity-100\"\n                      href={item.href}\n                      title={item.title}\n                    >\n                      {item.title}\n                    </Link>\n                  </AnimatedMenuItem>\n                ))}\n              </div>\n              <div className=\"flex gap-4 *:transition-blur *:duration-300 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none\">\n                {socialLinks.map((item, i) => (\n                  <AnimatedMenuItem\n                    key={item.title}\n                    order={i + menuItems.length}\n                  >\n                    <Link\n                      className=\"text-sm font-medium opacity-70 hover:opacity-100 tracking-wide uppercase\"\n                      href={item.href}\n                      title={item.title}\n                    >\n                      {item.title}\n                    </Link>\n                  </AnimatedMenuItem>\n                ))}\n              </div>\n            </div>\n          </AnimatedMenuList>\n        </AnimatedMenu>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/animated-menu.tsx"
    }
  ],
  "type": "registry:block"
}