{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "framer-carousel1",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/carousel/framer-carousel1.tsx",
      "content": "'use client';\n\nimport { AnimatePresence, LayoutGroup, motion } from 'motion/react';\nimport Image from 'next/image';\nimport React, { useEffect, useRef, useState } from 'react';\n// import { items } from '@/components/website/constant';\n\nexport const items = [\n  {\n    id: 1,\n    url: 'https://images.unsplash.com/photo-1761882835101-02ab45ac0726?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=690',\n    title: 'MAXX PHAM',\n  },\n  {\n    id: 2,\n    url: 'https://images.unsplash.com/photo-1661980494567-40a5e01b699b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=685',\n    title: 'BOXIEN BAY',\n  },\n  {\n    id: 3,\n    url: 'https://images.unsplash.com/photo-1761882725885-d3d8bd2032d1?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687',\n    title: 'AUSIZE MAM',\n  },\n  {\n    id: 4,\n    url: 'https://images.unsplash.com/photo-1761775915848-467e41c1c4db?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=689',\n    title: 'RECLKTIKA',\n  },\n  {\n    id: 5,\n    url: 'https://images.unsplash.com/photo-1761078980679-e89e25fe279b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687',\n    title: 'SONYPOO',\n  },\n  {\n    id: 6,\n    url: 'https://images.unsplash.com/photo-1760389005000-bf02bf24f463?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1123',\n    title: 'DONM FLY',\n  },\n  {\n    id: 7,\n    url: 'https://images.unsplash.com/photo-1761165307495-56bd564d322f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=663',\n    title: 'Snowy Mountain Highway',\n  },\n  {\n    id: 8,\n    url: 'https://images.unsplash.com/photo-1756299792672-157811bf1005?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1074',\n    title: 'FOGGY FOLS',\n  },\n  {\n    id: 9,\n    url: 'https://images.unsplash.com/photo-1572851899646-a1f69c664e1e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170',\n    title: 'DIM DARKO',\n  },\n  {\n    id: 10,\n    url: 'https://images.unsplash.com/photo-1759247178379-0e8eba83a4a6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=687',\n    title: 'BEALIVE',\n  },\n  {\n    id: 11,\n    url: 'https://images.unsplash.com/photo-1754968230523-052635c98f99?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=736',\n    title: 'DOMEDOM ROME',\n  },\n  {\n    id: 12,\n    url: 'https://images.unsplash.com/photo-1643037508102-46fb319979c5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=764',\n    title: 'IKEIMON POVE',\n  },\n];\n\nfunction FramerCarousel() {\n  const [activeItem, setActiveItem] = useState(items[0]);\n  const [width, setWidth] = useState(0);\n  const carousel = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!carousel.current) return;\n    setWidth(carousel.current?.scrollWidth - carousel.current?.offsetWidth);\n  }, [carousel]);\n\n  return (\n    <>\n      <motion.div\n        layoutId={'activeItems'}\n        className='rounded-md w-fit pb-4 gap-2 items-center mx-auto cursor-auto '\n        onClick={(e) => e.stopPropagation()}\n      >\n        <>\n          {items.map((tab: any, index) => (\n            <>\n              <AnimatePresence mode='popLayout' initial={false}>\n                {tab.id === activeItem.id && (\n                  <motion.figure\n                    key={tab?.id}\n                    className='dark:bg-neutral-900/60 bg-neutral-100/60 border  rounded-md p-4 backdrop-blur-xs'\n                  >\n                    <motion.div\n                      initial={{ opacity: 0 }}\n                      animate={{\n                        opacity: 1,\n                        transition: {\n                          ease: 'easeInOut',\n                          duration: 0.3,\n                          delay: 0.2,\n                        },\n                      }}\n                      exit={{\n                        opacity: 0,\n                        transition: {\n                          ease: 'easeInOut',\n                          duration: 0.2,\n                        },\n                      }}\n                    >\n                      <Image\n                        src={activeItem.url}\n                        width={1000}\n                        height={1000}\n                        alt='preview_img'\n                        className=' object-contain h-96  mx-auto rounded-md'\n                      />\n                    </motion.div>\n                  </motion.figure>\n                )}\n              </AnimatePresence>\n            </>\n          ))}\n        </>\n        <motion.div className='w-[550px] mt-4 mx-auto overflow-hidden   dark:bg-neutral-900/60 bg-neutral-100/60 border rounded-md'>\n          <motion.div\n            ref={carousel}\n            drag='x'\n            dragElastic={0.2}\n            dragConstraints={{ right: 0, left: -width }}\n            dragTransition={{ bounceDamping: 30 }}\n            transition={{ duration: 0.2, ease: 'easeInOut' }}\n            className='flex  '\n          >\n            {items.slice(0, 8)?.map((itemData, index) => {\n              return (\n                <motion.div\n                  key={itemData?.id ?? itemData?.url}\n                  className={`relative p-2 shrink-0`}\n                  onClick={() => setActiveItem(itemData)}\n                >\n                  <Image\n                    src={itemData?.url}\n                    width={400}\n                    height={400}\n                    alt='img'\n                    className='w-28 h-16 object-cover cursor-pointer relative z-2 rounded-md pointer-events-none'\n                  />\n                  {itemData?.id === activeItem?.id && (\n                    <motion.div\n                      layoutId='slider'\n                      transition={{\n                        layout: {\n                          duration: 0.2,\n                          ease: 'easeOut',\n                        },\n                      }}\n                      className='absolute top-0 left-0 h-full w-full dark:bg-neutral-100 bg-neutral-800 rounded-md'\n                    ></motion.div>\n                  )}\n                </motion.div>\n              );\n            })}\n          </motion.div>\n        </motion.div>\n      </motion.div>\n    </>\n  );\n}\n\nexport default FramerCarousel;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}