{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-menu-full-screen-demo",
  "title": "Animated Menu Demo",
  "description": "another demo showing animated menu component in full screen mode.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/animated-menu-full-screen"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/animated-menu-full-screen/index.tsx",
      "content": "'use client';\nimport { Variants } from 'motion/react';\nimport {\n  AnimatedMenu,\n  AnimatedMenuButton,\n  AnimatedMenuButtonToggleIcon,\n  AnimatedMenuList,\n  AnimatedMenuItem,\n  CloseAnimatedMenu,\n} from '@/components/systaliko-ui/blocks/animated-menu';\nimport Link from 'next/link';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\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 variants = {\n  open: {\n    width: '100vw',\n    height: '100vh',\n    transition: { duration: 0.75, ease: [0.76, 0, 0.24, 1] },\n  },\n  close: {\n    width: 64,\n    height: 64,\n    transition: { duration: 0.75, delay: 0.2, ease: [0.76, 0, 0.24, 1] },\n  },\n} as Variants;\nexport function AnimatedMenuFullScreenDemo() {\n  return (\n    <div className=\"border w-full self-start h-full bg-secondary\">\n      <div className=\"w-full z-[999] flex h-16 items-center justify-between pl-8 py-2\">\n        <span className=\"text-xl relative z-[9999] mix-blend-difference text-white font-bold tracking-tight\">\n          Systaliko UI\n        </span>\n        <div className=\"flex gap-4\">\n          <AnimatedMenu className=\"relative\">\n            <AnimatedMenuButton className=\"min-h-16 min-w-16\">\n              <AnimatedMenuButtonToggleIcon\n                size=\"xl\"\n                className=\"*:bg-white/80\"\n              />\n            </AnimatedMenuButton>\n            <AnimatedMenuList\n              variants={variants}\n              className=\"absolute right-0 top-0 bg-linear-to-bl from-zinc-950/90 to-zinc-950  text-muted\"\n            >\n              <div className=\"flex px-6 justify-evenly items-center gap-8 flex-wrap size-full\">\n                <div className=\"flex flex-col items-start space-y-6 *: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                        order={i}\n                      >\n                        <CloseAnimatedMenu>\n                          <Link\n                            className=\"text-5xl tracking-wide 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=\"space-y-6 flex flex-col justify-evenly\">\n                  <div className=\"flex gap-4 flex-wrap *: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 order={i + menuItems.length}>\n                          <CloseAnimatedMenu>\n                            <Link\n                              className=\"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\n                  <AnimatedMenuItem\n                    order={socialLinks.length + menuItems.length}\n                    className=\"space-y-3\"\n                  >\n                    <p className=\"text-muted/50 text-sm max-w-[35ch]\">\n                      in systaliko ui, we are using the animated menu component\n                      to create a beautiful and interactive navigation menu. it\n                      is designed to be easy to use and customizable, making it\n                      a great choice for any project.\n                    </p>\n                    <Button variant=\"link\" className=\"text-muted\">\n                      Get in touch\n                    </Button>\n                  </AnimatedMenuItem>\n                </div>\n              </div>\n            </AnimatedMenuList>\n          </AnimatedMenu>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/blocks/animated-menu-full-screen.tsx"
    }
  ],
  "type": "registry:block"
}