{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-tab1",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/image-tabs.tsx",
      "content": "'use client';\nimport { useMediaQuery } from '@/hooks/use-media-query';\nimport { cn } from '@/lib/utils';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React, { createContext, type ReactNode, useContext, useState } from 'react';\n\ninterface Tab {\n  id: string;\n  title: string;\n  description: string;\n  imageUrl: string;\n}\n\ninterface TabsContextType {\n  activeTab: string;\n  setActiveTab: (id: string) => void;\n  isDesktop: boolean;\n}\n\nconst TabsContext = createContext<TabsContextType | undefined>(undefined);\n\nconst useTabs = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tabs components must be used within a TabsProvider');\n  }\n  return context;\n};\n\nexport function TabsProvider({\n  children,\n  defaultValue,\n  className,\n}: {\n  children: ReactNode;\n  defaultValue: string;\n  className?: string;\n}) {\n  const [activeTab, setActiveTab] = useState(defaultValue);\n  const isDesktop = useMediaQuery('(min-width: 768px)');\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab, isDesktop }}>\n      <div className={cn('w-full h-full', className)}>{children}</div>\n    </TabsContext.Provider>\n  );\n}\n\nexport function TabList({ children, className }: { children: ReactNode; className?: string }) {\n  return <div className={cn('rounded-xs h-fit', className)}>{children}</div>;\n}\n\nexport function TabItem({ children, value }: { children: ReactNode; value: string }) {\n  const { activeTab, setActiveTab } = useTabs();\n\n  return (\n    <motion.div\n      className={`rounded-lg overflow-hidden mb-2 md:text-base text-sm ${\n        activeTab === value\n          ? 'active border-2 dark:border-[#656fe2] border-[#F2F2F2] dark:bg-[#E0ECFB] bg-[#F2F2F2]'\n          : 'bg-transparent border-2 dark:hover:border-[#656fe2]'\n      }`}\n      onClick={() => setActiveTab(value)}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nexport function TabHeader({ children, value }: { children: ReactNode; value: string }) {\n  const { activeTab } = useTabs();\n  return (\n    <h3\n      className={`p-4 md:text-base text-sm cursor-pointer transition-all font-semibold dark:text-white text-black dark:hover:bg-[#1e2a78] hover:bg-[#F2F2F2] dark:hover:text-white hover:text-black flex justify-between items-center ${\n        activeTab === value ? 'active dark:bg-[#1e2a78] bg-[#F2F2F2]' : 'dark:bg-[#11112b] bg-white'\n      }`}\n    >\n      {children}\n    </h3>\n  );\n}\n\nexport function TabDes({ children, value }: { children: ReactNode; value: string }) {\n  const { activeTab } = useTabs();\n  return (\n    <AnimatePresence mode='sync'>\n      {activeTab === value && (\n        <motion.div\n          initial={{ height: 0, opacity: 0 }}\n          animate={{ height: 'auto', opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={{\n            duration: 0.3,\n            ease: 'easeInOut',\n            delay: 0.14,\n          }}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport function TabImageContainer({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('', className)}>\n      <AnimatePresence mode='popLayout'>{children}</AnimatePresence>\n    </div>\n  );\n}\n\nexport function TabImage({ children, value }: { children: ReactNode; value: string }) {\n  const { activeTab, isDesktop } = useTabs();\n\n  if (activeTab !== value || !isDesktop) return null;\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, overflow: 'hidden' }}\n      animate={{ opacity: 1, overflow: 'hidden' }}\n      exit={{ opacity: 0, overflow: 'hidden' }}\n      transition={{\n        duration: 0.4,\n        delay: 0.2,\n      }}\n      className='p-4 h-[400px] rounded-md overflow-hidden'\n    >\n      {children}\n    </motion.div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/tabs/img-tabs1.tsx",
      "content": "'use client';\nimport {\n  TabDes,\n  TabHeader,\n  TabImage,\n  TabImageContainer,\n  TabItem,\n  TabList,\n  TabsProvider,\n} from '@/components/ui/image-tabs';\nimport React, { useState } from 'react';\n\nconst tabs = [\n  {\n    title: 'How do UI components improve UX?',\n    id: 'improve',\n    description:\n      'UI components can improve UX by providing familiar, consistent interactions that make it easy for users to navigate and interact with an application.',\n    imageUrl:\n      'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format',\n  },\n  {\n    title: 'Important of UI component.',\n    id: 'important',\n    description:\n      'Some common challenges include maintaining consistency across different devices and screen sizes, ensuring compatibility with various browsers and assistive technologies, and balancing flexibility with ease of use.',\n    imageUrl: 'https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format',\n  },\n  {\n    title: 'Is UI and UX Same?',\n    id: 'same',\n    description:\n      '     Developers can ensure the responsiveness of UI components by using techniques such as fluid layouts, flexible grids, and media queries to adapt the components to different screen sizes and orientations.',\n    imageUrl:\n      'https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format',\n  },\n];\nfunction ImageTabs1() {\n  return (\n    <>\n      <div className=' w-full  h-full'>\n        <TabsProvider\n          defaultValue='improve'\n          className='md:grid md:grid-cols-12 items-center justify-center'\n        >\n          <TabList className='md:col-span-5'>\n            {tabs.map((tab, index) => (\n              <TabItem key={tab.id} value={tab.id}>\n                <TabHeader value={tab.id}>{tab.title}</TabHeader>\n                <TabDes value={tab.id}>\n                  {' '}\n                  <p className={`dark:bg-white bg-[#F2F2F2] text-black p-3`}>{tab.description}</p>\n                  <img src={tab.imageUrl} alt={tab.title} className='md:hidden block rounded-md' />\n                </TabDes>\n              </TabItem>\n            ))}\n          </TabList>\n          <TabImageContainer className='md:col-span-7'>\n            {tabs.map((tab, index) => (\n              <TabImage key={tab.id} value={tab.id}>\n                <img\n                  src={tab.imageUrl}\n                  alt={tab.title}\n                  className='w-full h-full object-cover rounded-md'\n                />\n              </TabImage>\n            ))}\n          </TabImageContainer>\n        </TabsProvider>\n      </div>\n    </>\n  );\n}\n\nexport default ImageTabs1;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}