{
  "name": "navbar-menu",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/navbar-menu.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion } from \"motion/react\";\n\n\n\nconst transition = {\n  type: \"spring\" as const,\n  mass: 0.5,\n  damping: 11.5,\n  stiffness: 100,\n  restDelta: 0.001,\n  restSpeed: 0.001,\n};\n\nexport const MenuItem = ({\n  setActive,\n  active,\n  item,\n  children,\n}: {\n  setActive: (item: string) => void;\n  active: string | null;\n  item: string;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <div onMouseEnter={() => setActive(item)} className=\"relative \">\n      <motion.p\n        transition={{ duration: 0.3 }}\n        className=\"cursor-pointer text-black hover:opacity-[0.9] dark:text-white\"\n      >\n        {item}\n      </motion.p>\n      {active !== null && (\n        <motion.div\n          initial={{ opacity: 0, scale: 0.85, y: 10 }}\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          transition={transition}\n        >\n          {active === item && (\n            <div className=\"absolute top-[calc(100%_+_1.2rem)] left-1/2 transform -translate-x-1/2 pt-4\">\n              <motion.div\n                transition={transition}\n                layoutId=\"active\" // layoutId ensures smooth animation\n                className=\"bg-white dark:bg-black backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl\"\n              >\n                <motion.div\n                  layout // layout ensures smooth animation\n                  className=\"w-max h-full p-4\"\n                >\n                  {children}\n                </motion.div>\n              </motion.div>\n            </div>\n          )}\n        </motion.div>\n      )}\n    </div>\n  );\n};\n\nexport const Menu = ({\n  setActive,\n  children,\n}: {\n  setActive: (item: string | null) => void;\n  children: React.ReactNode;\n}) => {\n  return (\n    <nav\n      onMouseLeave={() => setActive(null)} // resets the state\n      className=\"relative rounded-full border border-transparent dark:bg-black dark:border-white/[0.2] bg-white shadow-input flex justify-center space-x-4 px-8 py-6 \"\n    >\n      {children}\n    </nav>\n  );\n};\n\nexport const ProductItem = ({\n  title,\n  description,\n  href,\n  src,\n}: {\n  title: string;\n  description: string;\n  href: string;\n  src: string;\n}) => {\n  return (\n    <a href={href} className=\"flex space-x-2\">\n      <img\n        src={src}\n        width={140}\n        height={70}\n        alt={title}\n        className=\"shrink-0 rounded-md shadow-2xl\"\n      />\n      <div>\n        <h4 className=\"text-xl font-bold mb-1 text-black dark:text-white\">\n          {title}\n        </h4>\n        <p className=\"text-neutral-700 text-sm max-w-[10rem] dark:text-neutral-300\">\n          {description}\n        </p>\n      </div>\n    </a>\n  );\n};\n\nexport const HoveredLink = ({ children, ...rest }: any) => {\n  return (\n    <a\n      {...rest}\n      className=\"text-neutral-700 dark:text-neutral-200 hover:text-black \"\n    >\n      {children}\n    </a>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/navbar-menu.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Navbar Menu"
}