{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "products-cards",
  "type": "registry:component",
  "description": "A Card component with optional code display for UI blocks.",
  "dependencies": [
    "@iconify/react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/cards/code/ProductsCardsCode.tsx",
      "content": "\"use client\";\r\nimport React from \"react\";\r\nimport Link from \"next/link\";\r\nimport { Card } from '@/components/ui/card'\r\nimport Image from \"next/image\";\r\nimport { Icon } from \"@iconify/react\";\r\n\r\nconst productsCardData = [\r\n  {\r\n    title: \"Boat Headphone\",\r\n    link: \"/\",\r\n    photo: \"/images/products/s2.jpg\",\r\n    salesPrice: 375,\r\n    price: 285,\r\n    rating: 4,\r\n  },\r\n  {\r\n    title: \"MacBook Air Pro\",\r\n    link: \"/\",\r\n    photo: \"/images/products/s5.jpg\",\r\n    salesPrice: 650,\r\n    price: 900,\r\n    rating: 5,\r\n  },\r\n  {\r\n    title: \"Red Valvet Dress\",\r\n    link: \"/\",\r\n    photo: \"/images/products/s8.jpg\",\r\n    salesPrice: 150,\r\n    price: 200,\r\n    rating: 3,\r\n  },\r\n  {\r\n    title: \"Cute Soft Teddybear\",\r\n    link: \"/\",\r\n    photo: \"/images/products/s11.jpg\",\r\n    salesPrice: 285,\r\n    price: 345,\r\n    rating: 2,\r\n  },\r\n];\r\n\r\nconst ProductsCards = () => {\r\n  const renderStars = (rating: number) => {\r\n    const stars = [];\r\n    for (let i = 0; i < 5; i++) {\r\n      if (i < rating) {\r\n        stars.push(<Icon key={i} icon=\"mdi:star\" className=\"text-yellow-500\" width={18} height={18} />);\r\n      } else {\r\n        stars.push(<Icon key={i} icon=\"mdi:star-outline\" className=\"text-gray-400\" width={18} height={18} />);\r\n      }\r\n    }\r\n    return stars;\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div className=\"grid grid-cols-12 gap-6\">\r\n        {productsCardData.map((item, i) => (\r\n          <div className=\"lg:col-span-3 md:col-span-6 col-span-12\" key={i}>\r\n            <Link href={item.link} className=\"group\">\r\n              <Card className=\"p-0 overflow-hidden \">\r\n                <div className=\"relative\">\r\n                  <Image src={item.photo} alt=\"materialm\" width=\"1280\" height=\"1280\" />\r\n                </div>\r\n                <div className=\"p-6 relative\">\r\n                  <button className=\"rounded-full z-1 absolute right-4 -top-6 bg-primary text-white flex justify-center items-center p-2 \">\r\n                    <Icon icon=\"solar:bag-5-linear\" height={24} width={24} className=\"w-6 h-6\" />\r\n                  </button>\r\n                  <h3 className=\"text-lg mb-1\">{item.title}</h3>\r\n                  <div className=\"flex items-center justify-between\">\r\n                    <div className=\"flex items-center gap-3\">\r\n                      <p className=\"text-inherit\">${item.price}</p>\r\n                      <span className=\"text-sm font-medium line-through text-forest-black/60 dark:text-white/60\">\r\n                        ${item.salesPrice}\r\n                      </span>\r\n                    </div>\r\n                    <div className=\"flex gap-1\">\r\n                      {renderStars(item.rating)}\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </Card>\r\n            </Link>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ProductsCards;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/cards/products-cards/ProductsCardsCode.tsx"
    }
  ]
}