{
  "name": "product-card-01-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/image-viewer-basic.json",
    "https://ui.stackzero.co/r/price-format-basic.json",
    "https://ui.stackzero.co/r/star-rating-fractions.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport ImageViewer from \"@/components/commerce-ui/image-viewer-basic\";\nimport PriceFormat from \"@/components/commerce-ui/price-format-basic\";\nimport StarRating_Fractions from \"@/components/commerce-ui/star-rating-fractions\";\nimport { Button } from \"@/components/ui/button\";\n\nconst DEFAULT_IMAGE_URL =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg\";\n\ninterface ProductCardProps {\n  imageUrl?: string;\n  discount?: string | null;\n  title?: string;\n  description?: string;\n  price?: number;\n  prefix?: string;\n  rating?: number;\n  reviewCount?: number;\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n  freeShipping?: boolean;\n}\n\nfunction ProductCard_01({\n  description = \"Premium noise-cancelling headphones with surround sound technology and high comfort\",\n  discount = \"20% OFF\",\n  freeShipping = true,\n  imageUrl = DEFAULT_IMAGE_URL,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  prefix = \"$\",\n  price = 98.96,\n  rating = 4.7,\n  reviewCount = 65,\n  title = \"Wireless headset\",\n}: ProductCardProps = {}) {\n  return (\n    <div className=\"group relative flex w-[350px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md dark:border-gray-800 dark:bg-gray-900\">\n      {/* Image section with background and dynamic glow effect */}\n      <div className=\"relative overflow-hidden bg-gradient-to-br from-teal-50 to-cyan-50 p-5 dark:from-teal-950/30 dark:to-cyan-950/30\">\n        {discount && (\n          <div className=\"absolute top-3 left-3 z-10\">\n            <span className=\"relative inline-block rounded-full bg-gradient-to-r from-teal-500 to-cyan-600 px-3 py-1.5 text-xs font-bold text-white\">\n              {discount}\n            </span>\n          </div>\n        )}\n\n        {/* Glow effect */}\n        <div className=\"absolute -bottom-10 left-1/2 h-40 w-40 -translate-x-1/2 transform rounded-full bg-teal-500/20 blur-3xl\"></div>\n\n        <div className=\"transition-transform duration-500 group-hover:scale-105\">\n          <ImageViewer\n            imageUrl={imageUrl}\n            classNameThumbnailViewer=\"rounded-lg object-contain h-[200px] mx-auto\"\n          />\n        </div>\n      </div>\n\n      {/* Content section */}\n      <div className=\"flex flex-1 flex-col gap-3 p-5\">\n        <div>\n          <h3 className=\"mb-1.5 text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100\">\n            {title}\n          </h3>\n\n          {/* Rating */}\n          <div className=\"mb-2 flex items-center\">\n            <StarRating_Fractions\n              value={rating}\n              maxStars={5}\n              readOnly\n              iconSize={16}\n              color=\"#0d9488\"\n            />\n            <span className=\"ml-2 text-xs text-gray-600 dark:text-gray-400\">\n              {rating} ({reviewCount} reviews)\n            </span>\n          </div>\n\n          <p className=\"mb-3 line-clamp-2 text-sm text-gray-600 dark:text-gray-400\">\n            {description}\n          </p>\n        </div>\n\n        {/* Price and shipping info */}\n        <div className=\"mt-auto flex flex-col\">\n          <PriceFormat\n            prefix={prefix}\n            value={price}\n            className=\"text-2xl font-bold text-teal-700 dark:text-teal-400\"\n          />\n\n          {freeShipping && (\n            <p className=\"mt-1 inline-flex items-center text-sm text-green-600 dark:text-green-400\">\n              <svg\n                className=\"mr-1 h-4 w-4\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n              Free Shipping\n            </p>\n          )}\n        </div>\n\n        {/* Action buttons */}\n        <div className=\"mt-3 flex flex-col gap-2\">\n          <Button\n            variant=\"outline\"\n            onClick={onAddToCart}\n            className=\"w-full border-gray-300 bg-white text-gray-800 transition-all duration-200 hover:border-teal-500 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-teal-500 dark:hover:bg-gray-700\"\n          >\n            Add to cart\n          </Button>\n          <Button\n            onClick={onBuyNow}\n            className=\"w-full bg-gradient-to-r from-teal-600 to-cyan-600 text-white transition-all hover:from-teal-700 hover:to-cyan-700\"\n          >\n            Buy now\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_01;\nexport type { ProductCardProps };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-01.tsx",
      "target": "components/commerce-ui/product-card-01.tsx"
    }
  ]
}