{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "img-tabs-standalone",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/tabs/img-tabs-standalone.tsx",
      "content": "'use client';\nimport { useMediaQuery } from '@/hooks/use-media-query';\nimport { AnimatePresence, motion } from 'motion/react';\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 ImageTabsStandalone() {\n  const [activeIndex, setActiveIndex] = useState<number | null>(0);\n\n  const handleClick = async (index: number) => {\n    setActiveIndex(activeIndex === index ? index : index);\n  };\n  const isDesktop = useMediaQuery('(min-width: 768px)');\n\n  return (\n    <>\n      <div className=' md:grid grid-cols-12 p-2 items-center justify-center w-full h-full'>\n        <div className='rounded-xs   col-span-5'>\n          {tabs.map((tab, index) => (\n            <motion.div\n              key={tab.id}\n              className={`rounded-lg overflow-hidden mb-2  ${\n                activeIndex === index\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            `}\n              onClick={() => handleClick(index)}\n            >\n              <h3\n                className={`p-4 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                  activeIndex === index\n                    ? 'active  dark:bg-[#1e2a78] bg-[#F2F2F2] '\n                    : 'dark:bg-[#11112b] bg-white'\n                }\n               `}\n              >\n                {tab.title}\n              </h3>\n              <AnimatePresence mode='sync'>\n                {activeIndex === index && (\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                    <p className={`dark:bg-white bg-[#F2F2F2] text-black p-3`}>{tab.description}</p>\n                    <img\n                      src={tab.imageUrl}\n                      alt={tab.title}\n                      className='mb-2 max-w-full h-full md:hidden block  rounded-md object-cover'\n                    />\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </motion.div>\n          ))}\n        </div>\n        <>\n          {isDesktop &&\n            tabs.map((tab, index) => {\n              return (\n                <>\n                  <AnimatePresence mode='popLayout'>\n                    {activeIndex === index && (\n                      <motion.div className='p-4 h-[400px] overflow-hidden col-span-7'>\n                        <motion.img\n                          src={tab.imageUrl}\n                          alt={tab.title}\n                          className='mb-2 max-w-full h-full  rounded-md object-cover'\n                          width={800}\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                          height={800}\n                        />\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </>\n              );\n            })}\n        </>\n      </div>\n    </>\n  );\n}\n\nexport default ImageTabsStandalone;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}