{
  "name": "product-card-02-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/star-rating-fractions.json",
    "https://ui.stackzero.co/r/price-format-basic.json",
    "https://ui.stackzero.co/r/image-viewer-basic.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 StarRatingFractions 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-4.jpg\";\n\ninterface ProductCard_02Props {\n  imageUrl?: string;\n  discount?: string | null;\n  title?: string;\n  rating?: number;\n  reviewCount?: number;\n  description?: string;\n  inStock?: boolean;\n  stockCount?: number;\n  hasShipping?: boolean;\n  shippingText?: string;\n  price?: number;\n  prefix?: string;\n  onAddToCart?: () => void;\n  onBuyNow?: () => void;\n}\n\nfunction ProductCard_02({\n  description = \"Experience next-level audio with the AeroTune X9, the world's most advanced wireless headset designed for audiophiles, gamers, and music lovers alike. With QuantumBass™ technology, every beat, bass drop, and whisper is delivered in studio-quality precision.\",\n  discount = \"20% OFF\",\n  hasShipping = true,\n  imageUrl = DEFAULT_IMAGE_URL,\n  inStock = true,\n  onAddToCart = () => {},\n  onBuyNow = () => {},\n  prefix = \"$\",\n  price = 39.59,\n  rating = 4.45,\n  reviewCount = 362,\n  shippingText = \"Free Shipping\",\n  stockCount = 256,\n  title = \"AeroTune X9\",\n}: ProductCard_02Props = {}) {\n  return (\n    <div className=\"bg-card grid max-w-screen-lg grid-cols-4 gap-6 rounded-lg border p-4\">\n      <div className=\"relative col-span-4 w-full md:col-span-2\">\n        {discount && (\n          <div className=\"absolute top-2 left-2 z-10 w-fit rounded-lg bg-purple-500/80 p-2\">\n            <p className=\"text-xs font-semibold\">{discount}</p>\n          </div>\n        )}\n        <ImageViewer imageUrl={imageUrl} />\n      </div>\n\n      <div className=\"col-span-4 flex flex-col gap-6 md:col-span-2\">\n        <div className=\"flex flex-col gap-2\">\n          <p className=\"text-3xl font-semibold\">{title}</p>\n          <div className=\"flex flex-row flex-wrap items-center gap-2\">\n            <StarRatingFractions readOnly value={rating} />\n            <p className=\"text-lg\">({rating})</p>\n            <p className=\"text-muted-foreground\">{reviewCount} reviews</p>\n          </div>\n          <p className=\"text-muted-foreground text-base\">{description}</p>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          {inStock ? (\n            <div className=\"flex flex-row items-center gap-2\">\n              <div className=\"w-fit rounded-lg border border-green-500 bg-green-500/30 px-2 py-1 text-sm font-semibold text-green-500 uppercase dark:border-green-300 dark:text-green-300\">\n                In Stock\n              </div>\n              <p className=\"text-muted-foreground\">+{stockCount} in stocks</p>\n            </div>\n          ) : (\n            <div className=\"w-fit rounded-lg border border-red-500 bg-red-500/30 px-2 py-1 text-sm font-semibold text-red-500 uppercase dark:border-red-300 dark:text-red-300\">\n              Out of Stock\n            </div>\n          )}\n\n          {hasShipping && (\n            <p>\n              <a\n                href=\"#\"\n                className=\"semibold underline underline-offset-4 opacity-80 hover:opacity-100\"\n              >\n                {shippingText}\n              </a>{\" \"}\n              on all orders\n            </p>\n          )}\n        </div>\n\n        <PriceFormat\n          prefix={prefix}\n          value={price}\n          className=\"text-4xl font-semibold\"\n        />\n\n        <div className=\"flex flex-row flex-wrap gap-4\">\n          <Button\n            variant=\"outline\"\n            size=\"lg\"\n            className=\"w-full md:w-fit\"\n            onClick={onAddToCart}\n          >\n            Add to cart\n          </Button>\n          <Button size=\"lg\" className=\"w-full md:w-fit\" onClick={onBuyNow}>\n            Buy now\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ProductCard_02;\nexport type { ProductCard_02Props };\n",
      "path": "/components/commerce-ui/blocks/product-card/product-card-02.tsx",
      "target": "components/commerce-ui/product-card-02.tsx"
    }
  ]
}