{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "productcard2",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/card/product-card2.tsx",
      "content": "'use client';\nimport { CardArr } from '@/components/website/constant';\nimport { cn } from '@/lib/utils';\nimport * as Select from '@radix-ui/react-select';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, Heart, ShoppingCart } from 'lucide-react';\nimport { motion } from 'motion/react';\nimport Image from 'next/image';\nimport React, { ReactNode, useState } from 'react';\n\nfunction Card2() {\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 className='w-[350px] mx-auto '>\n      <div className='dark:bg-white bg-neutral-100 rounded-md'>\n        <div className='w-full h-52 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          {/* <button className=\"absolute top-2 right-2 z-20\">\n            <Heart />\n          </button> */}\n          {CardArr.map((data, index) => (\n            <Image\n              src={data?.img}\n              alt='shoes'\n              key={data.img}\n              width={1000}\n              height={1000}\n              className={`absolute h-52 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-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'>\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore porro quos quae autem\n            vel praesentium.\n          </p>\n          <div className='py-1'>\n            <p className='text-sm'>Select Size:</p>\n            <Select.Root>\n              <Select.Trigger\n                className='inline-flex items-center justify-center rounded-sm px-[15px] text-[13px] leading-none h-[35px] gap-[5px] dark:bg-white bg-black text-violet11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-violet9 outline-hidden'\n                aria-label='Food'\n              >\n                <Select.Value placeholder='Select a size' />\n                <Select.Icon className='text-black'>\n                  <ChevronDownIcon />\n                </Select.Icon>\n              </Select.Trigger>\n              <Select.Portal>\n                <Select.Content className='overflow-hidden bg-white  text-black rounded-md shadow-[0px_10px_38px_-10px_rgba(22,23,24,0.35),0px_10px_20px_-15px_rgba(22,23,24,0.2)]'>\n                  <Select.ScrollUpButton className='flex items-center justify-center h-[25px] bg-white text-black cursor-default'>\n                    <ChevronUpIcon />\n                  </Select.ScrollUpButton>\n                  <Select.Viewport className='p-[5px]'>\n                    <Select.Group>\n                      <SelectItem value='l'>L: length:65-68</SelectItem>\n                      <SelectItem value='s'> S: length:68-71</SelectItem>\n                      <SelectItem value='m'>M: length:71-73</SelectItem>\n                      <SelectItem value='xl'>XL: length:76-78</SelectItem>\n                    </Select.Group>\n                  </Select.Viewport>\n                </Select.Content>\n              </Select.Portal>\n            </Select.Root>\n          </div>\n          <div className='flex justify-between py-2'>\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='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            <ShoppingCart className='w-5 h-5' /> Add to cart\n          </button>\n        </article>\n      </div>\n    </div>\n  );\n}\nconst SelectItem = React.forwardRef(({ children, className, ...props }: any, forwardedRef) => {\n  return (\n    <Select.Item\n      className={cn(\n        'text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-disabled:pointer-events-none data-highlighted:outline-hidden data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1',\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      <Select.ItemText>{children}</Select.ItemText>\n      <Select.ItemIndicator className='absolute left-0 w-[25px] inline-flex items-center justify-center'>\n        <CheckIcon />\n      </Select.ItemIndicator>\n    </Select.Item>\n  );\n});\nexport default Card2;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}