product-card-02-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat from "@/components/commerce-ui/price-format-basic";
5import StarRatingFractions from "@/components/commerce-ui/star-rating-fractions";
6import { Button } from "@/components/ui/button";
7 
8const DEFAULT_IMAGE_URL =
9  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-4.jpg";
10 
11interface ProductCard_02Props {
12  imageUrl?: string;
13  discount?: string | null;
14  title?: string;
15  rating?: number;
16  reviewCount?: number;
17  description?: string;
18  inStock?: boolean;
19  stockCount?: number;
20  hasShipping?: boolean;
21  shippingText?: string;
22  price?: number;
23  prefix?: string;
24  onAddToCart?: () => void;
25  onBuyNow?: () => void;
26}
27 
28function ProductCard_02({
29  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.",
30  discount = "20% OFF",
31  hasShipping = true,
32  imageUrl = DEFAULT_IMAGE_URL,
33  inStock = true,
34  onAddToCart = () => {},
35  onBuyNow = () => {},
36  prefix = "$",
37  price = 39.59,
38  rating = 4.45,
39  reviewCount = 362,
40  shippingText = "Free Shipping",
41  stockCount = 256,
42  title = "AeroTune X9",
43}: ProductCard_02Props = {}) {
44  return (
45    <div className="bg-card grid max-w-screen-lg grid-cols-4 gap-6 rounded-lg border p-4">
46      <div className="relative col-span-4 w-full md:col-span-2">
47        {discount && (
48          <div className="absolute top-2 left-2 z-10 w-fit rounded-lg bg-purple-500/80 p-2">
49            <p className="text-xs font-semibold">{discount}</p>
50          </div>
51        )}
52        <ImageViewer imageUrl={imageUrl} />
53      </div>
54 
55      <div className="col-span-4 flex flex-col gap-6 md:col-span-2">
56        <div className="flex flex-col gap-2">
57          <p className="text-3xl font-semibold">{title}</p>
58          <div className="flex flex-row flex-wrap items-center gap-2">
59            <StarRatingFractions readOnly value={rating} />
60            <p className="text-lg">({rating})</p>
61            <p className="text-muted-foreground">{reviewCount} reviews</p>
62          </div>
63          <p className="text-muted-foreground text-base">{description}</p>
64        </div>
65 
66        <div className="flex flex-col gap-2">
67          {inStock ? (
68// … truncated