{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "productcard1",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/card/product-card1.tsx",
      "content": "'use client';\nimport { CardArr } from '@/components/website/constant';\nimport { Heart } from 'lucide-react';\nimport { motion } from 'motion/react';\nimport Image from 'next/image';\nimport React, { useState } from 'react';\n\nfunction Card1() {\n  const [selectedImage, setSelectedImage] = useState(CardArr[0].img);\n  const [selectedColor, setSelectedColor] = useState(CardArr[0].color);\n  const handleColorButtonClick = (img: string, color: string) => {\n    setSelectedImage(img);\n    setSelectedColor(color);\n  };\n  const [isActive, setIsActive] = useState(false);\n\n  const handleClick = () => {\n    setIsActive((prevState) => !prevState);\n  };\n  return (\n    <div className='w-[300px] mx-auto'>\n      <div className='rounded-md p-2 dark:bg-white bg-neutral-100'>\n        <Image\n          src={selectedImage}\n          alt='shoes'\n          width={1000}\n          height={1000}\n          className='h-52 w-full rounded-md object-cover transition-all duration-300'\n          style={{\n            clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)',\n          }}\n        />\n        <div className='text-black pt-2'>\n          <div className='flex justify-between'>\n            <h1 className='font-semibold text-xl'>Nike Air Max</h1>\n            <motion.button\n              className=' text-2xl text-red-400 pr-2 '\n              onClick={handleClick}\n              animate={{ scale: isActive ? 1.2 : 1 }}\n              transition={{ type: 'spring', stiffness: 1000, damping: 10 }}\n            >\n              {isActive ? (\n                <>\n                  <Heart className=' fill-red-400' />\n                </>\n              ) : (\n                <>\n                  <Heart />\n                </>\n              )}\n            </motion.button>\n          </div>\n          <p className='text-xs'>\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore porro quos quae autem\n            vel praesentium.\n          </p>\n          <div className='flex justify-between py-1'>\n            <span className='font-semibold text-xl'>$39</span>\n            <div className='flex gap-2 items-center'>\n              {CardArr.map((data, index) => (\n                <button\n                  key={data.color}\n                  onClick={() => handleColorButtonClick(data.img, data.color)}\n                  className={` relative w-6 h-6 border  rounded-full grid place-content-center transition-all ${\n                    selectedColor === data.color ? ' border-black' : 'border-neutral-200'\n                  }`}\n                >\n                  <span\n                    className='w-4 h-4 rounded-full inline-block'\n                    style={{\n                      backgroundColor: data.color,\n                    }}\n                  ></span>\n                </button>\n              ))}\n            </div>\n          </div>\n          <button className='text-white w-full bg-black py-3 rounded-md'>Add to cart</button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Card1;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}