{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-menu-2-demo",
  "title": "Animated Menu 2 Demo",
  "description": "another demo showing animated menu component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/animated-menu"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/animated-menu-2/index.tsx",
      "content": "'use client';\nimport {\n  AnimatedMenu,\n  AnimatedMenuButton,\n  AnimatedMenuButtonToggleIcon,\n  AnimatedMenuList,\n  AnimatedMenuItem,\n  CloseAnimatedMenu,\n} from '@/components/systaliko-ui/blocks/animated-menu';\nimport { Variants } from 'motion/react';\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];\nconst menuListvariants = {\n  open: {\n    width: 280,\n    height: 320,\n    transition: { duration: 0.75, ease: [0.76, 0, 0.24, 1] },\n  },\n  close: {\n    width: 40,\n    height: 40,\n    transition: { duration: 0.75, delay: 0.2, ease: [0.76, 0, 0.24, 1] },\n  },\n} as Variants;\n\nconst menuItemVariants = {\n  initial: {\n    opacity: 0,\n    y: 100,\n  },\n  enter: (i: number) => ({\n    opacity: 1,\n    y: 0,\n    transition: {\n      delay: 0.55 + i * 0.1,\n      duration: 0.75,\n    },\n  }),\n  exit: (i: number) => ({\n    opacity: 0,\n    y: -100,\n    transition: {\n      delay: 0.25 + -i * 0.1,\n    },\n  }),\n} as Variants;\n\nexport function AnimatedMenu2Demo() {\n  return (\n    <div className=\"w-full self-start h-svh z-[999] flex items-start justify-between px-8 py-2\">\n      <span className=\"font-bold tracking-tight\">Systaliko UI</span>\n      <div className=\"flex gap-4\">\n        <AnimatedMenu>\n          <AnimatedMenuButton className=\"size-10 text-white\">\n            <AnimatedMenuButtonToggleIcon className=\"*:rounded\" />\n          </AnimatedMenuButton>\n          <AnimatedMenuList\n            variants={menuListvariants}\n            className=\"bg-linear-to-bl from-black/80 to-black border border-border/50 shadow-md rounded-3xl\"\n          >\n            <div className=\"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                  <div className=\"overflow-hidden\" key={item.title}>\n                    <AnimatedMenuItem\n                      className=\"perspective-dramatic perspective-origin-bottom\"\n                      variants={menuItemVariants}\n                      order={i}\n                    >\n                      <CloseAnimatedMenu>\n                        <Link\n                          className=\"text-white text-sm font-medium \"\n                          href={item.href}\n                          title={item.title}\n                        >\n                          {item.title}\n                        </Link>\n                      </CloseAnimatedMenu>\n                    </AnimatedMenuItem>\n                  </div>\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                  <div className=\"overflow-hidden\" key={item.title}>\n                    <AnimatedMenuItem\n                      order={i + menuItems.length}\n                      variants={menuItemVariants}\n                    >\n                      <CloseAnimatedMenu>\n                        <Link\n                          className=\"text-xs font-medium text-muted\"\n                          href={item.href}\n                          title={item.title}\n                        >\n                          {item.title}\n                        </Link>\n                      </CloseAnimatedMenu>\n                    </AnimatedMenuItem>\n                  </div>\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-2.tsx"
    }
  ],
  "type": "registry:block"
}