{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-tab-motion",
  "type": "registry:component",
  "description": "A tab component with animated selection.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/app/components/animatedComponents/tabs/animated-tab/AnimatedTabMotion.tsx",
      "content": "\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { motion } from \"motion/react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ntype Tab = {\r\n  title: string;\r\n  value: string;\r\n  content?: React.ReactNode;\r\n};\r\n\r\ntype TabsProps = {\r\n  tabs: Tab[];\r\n  containerClassName?: string;\r\n  activeTabClassName?: string;\r\n  tabClassName?: string;\r\n  contentClassName?: string;\r\n};\r\n\r\nconst DummyContent = () => {\r\n  return (\r\n    <img\r\n      src=\"/images/blog/blog-img1.jpg\"\r\n      alt=\"dummy image\"\r\n      width=\"1000\"\r\n      height=\"1000\"\r\n      className=\"object-cover object-left-top absolute -bottom-10 inset-x-0 rounded-xl mx-auto\"\r\n    />\r\n  );\r\n};\r\n\r\nconst tabs = [\r\n    {\r\n      title: \"Product\",\r\n      value: \"product\",\r\n      content: (\r\n        <div className=\"w-full overflow-hidden relative rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900 h-[300px]\">\r\n          <p>Product Tab</p>\r\n          <DummyContent />\r\n        </div>\r\n      ),\r\n    },\r\n    {\r\n      title: \"Services\",\r\n      value: \"services\",\r\n      content: (\r\n        <div className=\"w-full overflow-hidden relative rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900 h-[300px]\">\r\n          <p>Services tab</p>\r\n          <DummyContent />\r\n        </div>\r\n      ),\r\n    },\r\n    {\r\n      title: \"Playground\",\r\n      value: \"playground\",\r\n      content: (\r\n        <div className=\"w-full overflow-hidden relative rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900 h-[300px]\">\r\n          <p>Playground tab</p>\r\n          <DummyContent />\r\n        </div>\r\n      ),\r\n    },\r\n    {\r\n      title: \"Content\",\r\n      value: \"content\",\r\n      content: (\r\n        <div className=\"w-full overflow-hidden relative rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900 h-[300px]\">\r\n          <p>Content tab</p>\r\n          <DummyContent />\r\n        </div>\r\n      ),\r\n    },\r\n    {\r\n      title: \"Random\",\r\n      value: \"random\",\r\n      content: (\r\n        <div className=\"w-full overflow-hidden relative rounded-2xl p-10 text-xl md:text-4xl font-bold text-white bg-gradient-to-br from-purple-700 to-violet-900 h-[300px]\">\r\n          <p>Random tab</p>\r\n          <DummyContent />\r\n        </div>\r\n      ),\r\n    },\r\n  ];\r\n\r\n const Tabs = ({\r\n  tabs,\r\n  containerClassName,\r\n  activeTabClassName,\r\n  tabClassName,\r\n  contentClassName,\r\n}: TabsProps) => {\r\n  const [activeIdx, setActiveIdx] = useState(0);\r\n  const [hovering, setHovering] = useState(false);\r\n\r\n  const handleSelect = (idx: number) => {\r\n    setActiveIdx(idx);\r\n  };\r\n\r\n  const reorderedTabs = [\r\n    tabs[activeIdx],\r\n    ...tabs.filter((_, i) => i !== activeIdx),\r\n  ];\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className={cn(\r\n          \"flex flex-row items-center justify-start [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full\",\r\n          containerClassName\r\n        )}\r\n      >\r\n        {tabs.map((tab, idx) => {\r\n          const isActive = idx === activeIdx;\r\n          return (\r\n            <button\r\n              key={tab.value}\r\n              onClick={() => handleSelect(idx)}\r\n              onMouseEnter={() => setHovering(true)}\r\n              onMouseLeave={() => setHovering(false)}\r\n              className={cn(\"relative px-4 py-2 rounded-full\", tabClassName)}\r\n              style={{ transformStyle: \"preserve-3d\" }}\r\n            >\r\n              {isActive && (\r\n                <motion.div\r\n                  layoutId=\"clickedbutton\"\r\n                  transition={{ type: \"spring\", bounce: 0.3, duration: 0.6 }}\r\n                  className={cn(\r\n                    \"absolute inset-0 bg-primary  rounded-full\",\r\n                    activeTabClassName\r\n                  )}\r\n                />\r\n              )}\r\n              <span className={`relative block  ${isActive ? 'text-white' : 'text-black dark:text-white'}`}>\r\n                {tab.title}\r\n              </span>\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      <FadeInStack\r\n        tabs={reorderedTabs}\r\n        hovering={hovering}\r\n        className={cn(\"mt-10\", contentClassName)}\r\n      />\r\n    </>\r\n  );\r\n};\r\n\r\ntype FadeInStackProps = {\r\n  className?: string;\r\n  tabs: Tab[];\r\n  hovering?: boolean;\r\n};\r\n\r\n const FadeInStack = ({ className, tabs, hovering }: FadeInStackProps) => {\r\n  return (\r\n    <div className=\"relative w-full h-[300px]\">\r\n      {tabs.map((tab, idx) => (\r\n        <motion.div\r\n          key={tab.value}\r\n          layoutId={tab.value}\r\n          style={{\r\n            scale: 1 - idx * 0.1,\r\n            top: hovering ? idx * -15 : 0,\r\n            zIndex: -idx,\r\n            opacity: idx < 3 ? 1 - idx * 0.1 : 0,\r\n          }}\r\n          animate={{\r\n            y: idx === 0 ? [0, 40, 0] : 0,\r\n          }}\r\n          className={cn(\"w-full h-full absolute top-0 left-0\", className)}\r\n        >\r\n          {tab.content}\r\n        </motion.div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default function AnimatedTabMotion(){\r\n    return (\r\n        <>\r\n<div className=\" [perspective:1000px] relative b flex flex-col max-w-5xl mx-auto w-full  items-start justify-start mb-13\">\r\n      <Tabs tabs={tabs} />\r\n    </div>          \r\n        </>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/animated/tabs/animated-tab/AnimatedTabMotion.tsx"
    }
  ]
}