{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "productcard3",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/card/product-card3.tsx",
      "content": "'use client';\nimport { Carousel, Slider, SliderContainer, SliderDotButton } from '@/components/ui/carousel';\nimport { CardArr } from '@/components/website/constant';\nimport type { EmblaOptionsType } from 'embla-carousel';\nimport { CheckIcon, Heart } from 'lucide-react';\nimport { motion } from 'motion/react';\nimport Image from 'next/image';\nimport React, { ReactNode, useState } from 'react';\n\nfunction ProductCard3() {\n  const [isActive, setIsActive] = useState(false);\n\n  const handleClick = () => {\n    setIsActive((prevState) => !prevState);\n  };\n  const OPTIONS: EmblaOptionsType = { loop: true };\n\n  return (\n    <div className='w-[350px] mx-auto '>\n      <div className='dark:bg-white bg-neutral-100 rounded-md p-2'>\n        <div className='w-full h-72  relative'>\n          <motion.button\n            className='absolute top-2 right-2 z-20 text-2xl text-white'\n            onClick={handleClick}\n            animate={{ scale: isActive ? 1.2 : 1 }}\n            transition={{ type: 'spring', stiffness: 1000, damping: 10 }}\n          >\n            {isActive ? <Heart className=' fill-white' /> : <Heart />}\n          </motion.button>\n          <Carousel options={OPTIONS} className='h-full relative'>\n            <SliderContainer className='gap-2 h-full'>\n              {CardArr.map((data, index) => (\n                <Slider key={data.color} className='w-full h-full'>\n                  <Image\n                    src={data?.img}\n                    alt='shoes'\n                    width={400}\n                    height={400}\n                    className={`w-full h-full rounded-md  object-cover  `}\n                  />\n                </Slider>\n              ))}\n            </SliderContainer>\n            <div className='flex justify-center py-2 absolute bottom-0 z-2 w-full'>\n              <SliderDotButton activeClass='dark:bg-black' />\n            </div>\n          </Carousel>\n        </div>\n        <article className='text-black pt-2 p-2'>\n          <div className='flex justify-between'>\n            <h1 className='font-semibold text-xl text-blue-500'>Nike Air Max</h1>\n            <span className='font-medium text-xl text-blue-500'>$39</span>\n          </div>\n          <p className='text-xs pb-2'>\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore porro quos quae autem\n            vel praesentium.\n          </p>\n\n          <button className='w-full text-white flex justify-center items-center gap-2 bg-linear-to-r dark:from-[#070e41] dark:to-[#263381] from-[#3e5068] to-[#0c1970] py-3 rounded-md'>\n            Add to cart\n          </button>\n        </article>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard3;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}