{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "productcard6",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/card/product-card6.tsx",
      "content": "'use client';\nimport { CardArr } from '@/components/website/constant';\nimport { Bookmark, ShoppingCart } from 'lucide-react';\nimport { motion } from 'motion/react';\nimport Image from 'next/image';\nimport React, { useState } from 'react';\n\nfunction Card() {\n  const [selectedImage, setSelectedImage] = useState(CardArr[1].img);\n  const [selectedColor, setSelectedColor] = useState(CardArr[1].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\n  return (\n    <div\n      // whileTap={{ scale: 0.9 }}\n      className=\"w-[350px] mx-auto relative rounded-md border before:content-[''] before:border before:h-full before:w-full before:absolute before:top-0 before:left-0 before:bg-white before:translate-y-8 before:scale-90 before:rounded-md before:shadow-md after:content-[''] after:h-full after:border after:w-full after:absolute after:top-0 after:left-0 after:bg-white after:shadow-md after:translate-y-4 after:z-2 after:scale-95 after:rounded-md \"\n    >\n      <div className='dark:bg-white bg-neutral-100 rounded-md relative z-4 shadow-lg'>\n        <div className='w-full h-60 relative'>\n          <motion.button\n            className='absolute top-3 right-1 px-4 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 ? (\n              <>\n                <Bookmark className=' fill-white' />\n              </>\n            ) : (\n              <>\n                <Bookmark />\n              </>\n            )}\n          </motion.button>\n          {CardArr.map((data, index) => (\n            <Image\n              key={`${data.color}-${index}`}\n              src={data?.img}\n              alt='shoes'\n              width={1000}\n              height={1000}\n              className={`absolute h-60 w-full rounded-t-md  object-cover  ${\n                selectedColor === data.color\n                  ? 'z-10 transition-all duration-500'\n                  : 'transition-all delay-500'\n              }`}\n              style={{\n                clipPath:\n                  selectedColor === data.color\n                    ? 'polygon(0 0, 100% 0, 100% 100%, 0% 100%) '\n                    : 'polygon(0 100%, 100% 100%, 100% 100%, 0% 100%) ',\n              }}\n            />\n          ))}\n        </div>\n        <article className='text-black pt-2 p-4'>\n          <div className='flex justify-between'>\n            <h1 className='font-semibold text-xl text-black'>Nike Air Max</h1>\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          <div className='flex justify-between py-2 items-center'>\n            <span className='font-medium text-2xl text-black'>$39</span>\n            <button className='w-fit px-4 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              <ShoppingCart className='w-5 h-5' />\n            </button>\n          </div>\n        </article>\n      </div>\n    </div>\n  );\n}\n\nexport default Card;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}