product-card-08-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat from "@/components/commerce-ui/price-format-basic";
5import { Button } from "@/components/ui/button";
6 
7const DEFAULT_IMAGE_URL =
8  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/tablet-01.jpg";
9 
10interface Review {
11  name: string;
12  rating: number;
13  text: string;
14  verified?: boolean;
15}
16 
17interface ProductCard_08Props {
18  imageUrl?: string;
19  productName?: string;
20  description?: string;
21  price?: number;
22  inStock?: boolean;
23  stockCount?: number;
24  isNew?: boolean;
25  reviews?: Review[];
26  onAddToCart?: () => void;
27  onBuyNow?: () => void;
28  currencyPrefix?: string;
29}
30 
31function ProductCard_08({
32  currencyPrefix = "$",
33  description = "Powerful tablet with stunning display, long battery life, and a lightweight design",
34  imageUrl = DEFAULT_IMAGE_URL,
35  inStock = true,
36  isNew = true,
37  onAddToCart = () => {},
38  onBuyNow = () => {},
39  price = 499.99,
40  productName = "Ultra Tablet Pro",
41  reviews = [
42    {
43      name: "David K.",
44      rating: 5,
45      text: "Perfect for my work and entertainment needs. Fast processor!",
46      verified: true,
47    },
48    {
49      name: "Maria L.",
50      rating: 4,
51      text: "Great device, impressive screen quality.",
52    },
53    {
54      name: "Jason R.",
55      rating: 5,
56      text: "Amazing battery life, lasts all day easily.",
57      verified: true,
58    },
59  ],
60  stockCount = 24,
61}: ProductCard_08Props = {}) {
62  // Calculate average rating
63  const avgRating =
64    reviews.length > 0
65      ? reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length
66      : 0;
67 
68  return (
69    <div className="flex flex-col overflow-hidden rounded-xl">
70      {/* Main product card */}
71      <div className="group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white transition-all duration-300 hover:shadow-md sm:h-[220px] sm:flex-row dark:border-gray-800 dark:bg-gray-900">
72        {/* Image section */}
73        <div className="relative h-52 w-full bg-gradient-to-br from-blue-50 via-purple-50 to-blue-50 p-6 sm:h-full sm:w-2/5 dark:from-gray-900 dark:via-purple-950/10 dark:to-gray-900">
74          {/* New badge */}
75          {isNew && (
76            <div className="absolute top-3 left-3 z-10">
77              <div className="rounded-full bg-blue-600 px-2.5 py-1 text-xs font-bold text-white shadow-sm">
78                NEW
79              </div>
80            </div>
81          )}
82 
83// … truncated