{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-transition-panel",
  "type": "registry:block",
  "title": "Tabs transition panel",
  "description": "Tabs transition panel",
  "files": [
    {
      "path": "components/usages/tabstransitionpanelusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { TabsTransitionPanel } from \"@/registry/open-source/tabs-transition-panel\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<TabsTransitionPanel />\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/tabstransitionpanelusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { TabsTransitionPanel } from \"@/registry/open-source/tabs-transition-panel\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<TabsTransitionPanel />\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/tabs-transition-panel.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useState } from \"react\";\r\n\r\nimport Image from \"next/image\";\r\n\r\nimport { fake_workspotlight } from \"@/components/layouts/home\";\r\nimport {\r\n\tAnimatePresence,\r\n\tmotion,\r\n\tMotionProps,\r\n\tTransition,\r\n\tVariant,\r\n} from \"framer-motion\";\r\nimport parse from \"html-react-parser\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\nexport function TabsTransitionPanel({\r\n\tdata = { workSpotlight: fake_workspotlight },\r\n}) {\r\n\tconst [activeIndex, setActiveIndex] = useState(0);\r\n\r\n\treturn (\r\n\t\t<section className=\"pb-24 bg-background mt-[50vh]\">\r\n\t\t\t<span className=\"my-12 block text-center\">\r\n\t\t\t\t<h2>Like your brand's personal chauffeur</h2>\r\n\t\t\t\t<h3>Leave the driving to us</h3>\r\n\t\t\t</span>\r\n\t\t\t<div className=\"mb-4 flex space-x-2 overflow-x-auto\">\r\n\t\t\t\t{data.workSpotlight.map(({ title, firstName }, index) => (\r\n\t\t\t\t\t<button\r\n\t\t\t\t\t\tkey={index}\r\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(index)}\r\n\t\t\t\t\t\tclassName={`rounded-md px-3 py-1 text-sm font-medium ${activeIndex === index\r\n\t\t\t\t\t\t\t\t? \"bg-background text-foreground dark:bg-background dark:text-foreground\"\r\n\t\t\t\t\t\t\t\t: \"bg-background text-foreground dark:bg-background dark:text-foreground\"\r\n\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{firstName}\r\n\t\t\t\t\t</button>\r\n\t\t\t\t))}\r\n\t\t\t</div>\r\n\t\t\t<div className=\"overflow-hidden border-t border-zinc-200 dark:border-zinc-700\">\r\n\t\t\t\t<TransitionPanel\r\n\t\t\t\t\tactiveIndex={activeIndex}\r\n\t\t\t\t\tdata={data.workSpotlight}\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\t\t</section>\r\n\t);\r\n}\r\n\r\ntype TransitionPanelProps = {\r\n\tchildren: React.ReactNode[];\r\n\tclassName?: string;\r\n\ttransition?: Transition;\r\n\tactiveIndex: number;\r\n\tvariants?: { enter: Variant; center: Variant; exit: Variant };\r\n} & MotionProps;\r\n\r\nexport function TransitionPanel({\r\n\tchildren,\r\n\tclassName,\r\n\ttransition,\r\n\tvariants,\r\n\tactiveIndex,\r\n\tdata,\r\n\t...motionProps\r\n}: TransitionPanelProps) {\r\n\treturn (\r\n\t\t<div className={cn(\"relative\", className)}>\r\n\t\t\t<AnimatePresence\r\n\t\t\t\tinitial={false}\r\n\t\t\t\tmode=\"popLayout\"\r\n\t\t\t\tcustom={motionProps.custom}\r\n\t\t\t>\r\n\t\t\t\t{data.map(\r\n\t\t\t\t\t({ title, firstName, description, image }, index) =>\r\n\t\t\t\t\t\tindex == activeIndex && (\r\n\t\t\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\t\t\tkey={title}\r\n\t\t\t\t\t\t\t\tclassName=\"cont-page\"\r\n\t\t\t\t\t\t\t\tinitial=\"enter\"\r\n\t\t\t\t\t\t\t\tanimate=\"center\"\r\n\t\t\t\t\t\t\t\texit=\"exit\"\r\n\t\t\t\t\t\t\t\ttransition={{ duration: 0.2, ease: \"easeInOut\" }}\r\n\t\t\t\t\t\t\t\tvariants={{\r\n\t\t\t\t\t\t\t\t\tenter: {\r\n\t\t\t\t\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\t\t\t\t\ty: -50,\r\n\t\t\t\t\t\t\t\t\t\tfilter: \"blur(4px)\",\r\n\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\tcenter: { opacity: 1, y: 0, filter: \"blur(0px)\" },\r\n\t\t\t\t\t\t\t\t\texit: { opacity: 0, y: 50, filter: \"blur(4px)\" },\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<h3 className=\"mb-2 font-medium text-foreground\">\r\n\t\t\t\t\t\t\t\t\t{title}\r\n\t\t\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t\t\t<span className=\"text-foreground\">\r\n\t\t\t\t\t\t\t\t\t{parse(description || \"\")}\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\t\tsrc={image[0]?.url}\r\n\t\t\t\t\t\t\t\t\theight={200}\r\n\t\t\t\t\t\t\t\t\twidth={400}\r\n\t\t\t\t\t\t\t\t\talt={image[0]?.title || \"Work by Drive Brand Studio\"}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</motion.div>\r\n\t\t\t\t\t\t)\r\n\t\t\t\t)}{\" \"}\r\n\t\t\t</AnimatePresence>\r\n\t\t</div>\r\n\t);\r\n}\r\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"
    }
  ]
}