{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:block",
  "title": "Tabs",
  "description": "Tabs",
  "files": [
    {
      "path": "components/usages/tabsusage.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\n\nimport { Tabs } from \"@/registry/open-source/tabs\";\n\nconst DummyContent = () => {\n\treturn (\n\t\t<Image\n\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\talt=\"dummy image\"\n\t\t\twidth={100}\n\t\t\theight={100}\n\t\t\tclassName=\"object-cover object-top-left h-[60%]  md:h-[90%] absolute -bottom-10 inset-x-0 w-[90%] rounded-xl mx-auto\"\n\t\t/>\n\t);\n};\n\nexport const tabs = [\n\t{\n\t\ttitle: \"Product\",\n\t\tvalue: \"product\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Product Tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Services\",\n\t\tvalue: \"services\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Services tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Playground\",\n\t\tvalue: \"playground\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Playground tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Content\",\n\t\tvalue: \"content\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Content tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Random\",\n\t\tvalue: \"random\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Random tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n];\n\nfunction TabsDemo() {\n\treturn (\n\t\t<div className=\"h-80 md:h-160 perspective-[1000px] relative b flex flex-col max-w-5xl mx-auto w-full  items-start justify-start my-40\">\n\t\t\t<Tabs tabs={tabs} />\n\t\t</div>\n\t);\n}\n\nexport default TabsDemo;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/tabsusage.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\n\nimport { Tabs } from \"@/registry/open-source/tabs\";\n\nconst DummyContent = () => {\n\treturn (\n\t\t<Image\n\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\talt=\"dummy image\"\n\t\t\twidth={100}\n\t\t\theight={100}\n\t\t\tclassName=\"object-cover object-top-left h-[60%]  md:h-[90%] absolute -bottom-10 inset-x-0 w-[90%] rounded-xl mx-auto\"\n\t\t/>\n\t);\n};\n\nexport const tabs = [\n\t{\n\t\ttitle: \"Product\",\n\t\tvalue: \"product\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Product Tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Services\",\n\t\tvalue: \"services\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Services tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Playground\",\n\t\tvalue: \"playground\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Playground tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Content\",\n\t\tvalue: \"content\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Content tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Random\",\n\t\tvalue: \"random\",\n\t\tcontent: (\n\t\t\t<div className=\"w-full overflow-hidden relative h-full rounded-2xl p-10 text-xl md:text-4xl font-bold text-secondary bg-linear-to-br from-purple-700 to-violet-900\">\n\t\t\t\t<p>Random tab</p>\n\t\t\t\t<DummyContent />\n\t\t\t</div>\n\t\t),\n\t},\n];\n\nfunction TabsDemo() {\n\treturn (\n\t\t<div className=\"h-80 md:h-160 perspective-[1000px] relative b flex flex-col max-w-5xl mx-auto w-full  items-start justify-start my-40\">\n\t\t\t<Tabs tabs={tabs} />\n\t\t</div>\n\t);\n}\n\nexport default TabsDemo;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/tabs.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion } from \"motion/react\";\n\n// https://ui.aceternity.com/components/tabs\n\ntype Tab = {\n\ttitle: string;\n\tvalue: string;\n\tcontent?: string | React.ReactNode | any;\n};\n\nexport const Tabs = ({\n\ttabs: propTabs,\n\tcontainerClassName,\n\tactiveTabClassName,\n\ttabClassName,\n\tcontentClassName,\n}: {\n\ttabs: Tab[];\n\tcontainerClassName?: string;\n\tactiveTabClassName?: string;\n\ttabClassName?: string;\n\tcontentClassName?: string;\n}) => {\n\tconst [active, setActive] = useState<Tab>(propTabs[0]);\n\tconst [tabs, setTabs] = useState<Tab[]>(propTabs);\n\n\tconst moveSelectedTabToTop = (idx: number) => {\n\t\tconst newTabs = [...propTabs];\n\t\tconst selectedTab = newTabs.splice(idx, 1);\n\t\tnewTabs.unshift(selectedTab[0]);\n\t\tsetTabs(newTabs);\n\t\tsetActive(newTabs[0]);\n\t};\n\n\tconst [hovering, setHovering] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-row items-center justify-start perspective-[1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full\",\n\t\t\t\t\tcontainerClassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{propTabs.map((tab, idx) => (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={tab.title}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tmoveSelectedTabToTop(idx);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonMouseEnter={() => setHovering(true)}\n\t\t\t\t\t\tonMouseLeave={() => setHovering(false)}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative px-4 py-2 rounded-full\",\n\t\t\t\t\t\t\ttabClassName\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{active.value === tab.value && (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tlayoutId=\"clickedbutton\"\n\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\t\tbounce: 0.3,\n\t\t\t\t\t\t\t\t\tduration: 0.6,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"absolute inset-0 bg-background dark:bg-background rounded-full \",\n\t\t\t\t\t\t\t\t\tactiveTabClassName\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<span className=\"relative block text-foreground dark:text-foreground\">\n\t\t\t\t\t\t\t{tab.title}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<FadeInDiv\n\t\t\t\ttabs={tabs}\n\t\t\t\tactive={active}\n\t\t\t\tkey={active.value}\n\t\t\t\thovering={hovering}\n\t\t\t\tclassName={cn(\"mt-32\", contentClassName)}\n\t\t\t/>\n\t\t</>\n\t);\n};\n\nexport const FadeInDiv = ({\n\tclassName,\n\ttabs,\n\thovering,\n}: {\n\tclassName?: string;\n\tkey?: string;\n\ttabs: Tab[];\n\tactive: Tab;\n\thovering?: boolean;\n}) => {\n\tconst isActive = (tab: Tab) => {\n\t\treturn tab.value === tabs[0].value;\n\t};\n\treturn (\n\t\t<div className=\"relative w-full h-full\">\n\t\t\t{tabs.map((tab, idx) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={tab.value}\n\t\t\t\t\tlayoutId={tab.value}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tscale: 1 - idx * 0.1,\n\t\t\t\t\t\ttop: hovering ? idx * -50 : 0,\n\t\t\t\t\t\tzIndex: -idx,\n\t\t\t\t\t\topacity: idx < 3 ? 1 - idx * 0.1 : 0,\n\t\t\t\t\t}}\n\t\t\t\t\tanimate={{\n\t\t\t\t\t\ty: isActive(tab) ? [0, 40, 0] : 0,\n\t\t\t\t\t}}\n\t\t\t\t\tclassName={cn(\"w-full h-full absolute top-0 left-0\", className)}\n\t\t\t\t>\n\t\t\t\t\t{tab.content}\n\t\t\t\t</motion.div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}