{
  "name": "tabs",
  "type": "registry:ui",
  "dependencies": [
    "@radix-ui/react-tabs"
  ],
  "files": [
    {
      "path": "components/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ntype Tab = {\n  title: string;\n  value: string;\n  content?: string | React.ReactNode | any;\n};\n\nexport const Tabs = ({\n  tabs: propTabs,\n  containerClassName,\n  activeTabClassName,\n  tabClassName,\n  contentClassName,\n}: {\n  tabs: Tab[];\n  containerClassName?: string;\n  activeTabClassName?: string;\n  tabClassName?: string;\n  contentClassName?: string;\n}) => {\n  const [active, setActive] = useState<Tab>(propTabs[0]);\n  const [tabs, setTabs] = useState<Tab[]>(propTabs);\n\n  const moveSelectedTabToTop = (idx: number) => {\n    const newTabs = [...propTabs];\n    const selectedTab = newTabs.splice(idx, 1);\n    newTabs.unshift(selectedTab[0]);\n    setTabs(newTabs);\n    setActive(newTabs[0]);\n  };\n\n  const [hovering, setHovering] = useState(false);\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"flex flex-row items-center justify-start [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full\",\n          containerClassName\n        )}\n      >\n        {propTabs.map((tab, idx) => (\n          <button\n            key={tab.title}\n            onClick={() => {\n              moveSelectedTabToTop(idx);\n            }}\n            onMouseEnter={() => setHovering(true)}\n            onMouseLeave={() => setHovering(false)}\n            className={cn(\"relative px-4 py-2 rounded-full\", tabClassName)}\n            style={{\n              transformStyle: \"preserve-3d\",\n            }}\n          >\n            {active.value === tab.value && (\n              <motion.div\n                layoutId=\"clickedbutton\"\n                transition={{ type: \"spring\", bounce: 0.3, duration: 0.6 }}\n                className={cn(\n                  \"absolute inset-0 bg-gray-200 dark:bg-zinc-800 rounded-full \",\n                  activeTabClassName\n                )}\n              />\n            )}\n\n            <span className=\"relative block text-black dark:text-white\">\n              {tab.title}\n            </span>\n          </button>\n        ))}\n      </div>\n      <FadeInDiv\n        tabs={tabs}\n        active={active}\n        key={active.value}\n        hovering={hovering}\n        className={cn(\"mt-32\", contentClassName)}\n      />\n    </>\n  );\n};\n\nexport const FadeInDiv = ({\n  className,\n  tabs,\n  hovering,\n}: {\n  className?: string;\n  key?: string;\n  tabs: Tab[];\n  active: Tab;\n  hovering?: boolean;\n}) => {\n  const isActive = (tab: Tab) => {\n    return tab.value === tabs[0].value;\n  };\n  return (\n    <div className=\"relative w-full h-full\">\n      {tabs.map((tab, idx) => (\n        <motion.div\n          key={tab.value}\n          layoutId={tab.value}\n          style={{\n            scale: 1 - idx * 0.1,\n            top: hovering ? idx * -50 : 0,\n            zIndex: -idx,\n            opacity: idx < 3 ? 1 - idx * 0.1 : 0,\n          }}\n          animate={{\n            y: isActive(tab) ? [0, 40, 0] : 0,\n          }}\n          className={cn(\"w-full h-full absolute top-0 left-0\", className)}\n        >\n          {tab.content}\n        </motion.div>\n      ))}\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/tabs.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Tabs"
}