product-card-04-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormatSale from "@/components/commerce-ui/price-format-sale";
5import StarRating_Fractions 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/smartwatch-01.jpg";
10 
11interface ProductCard_04Props {
12  imageUrl?: string;
13  tagText?: string;
14  productName?: string;
15  originalPrice?: number;
16  salePrice?: number;
17  rating?: number;
18  maxRating?: number;
19  reviewCount?: number;
20  onAddToCart?: () => void;
21  onBuyNow?: () => void;
22  currencyPrefix?: string;
23}
24 
25function ProductCard_04({
26  currencyPrefix = "$",
27  imageUrl = DEFAULT_IMAGE_URL,
28  maxRating = 5,
29  onAddToCart = () => {},
30  onBuyNow = () => {},
31  originalPrice = 299,
32  productName = "Smart Watch Pro",
33  rating = 4.5,
34  reviewCount = 128,
35  salePrice = 249,
36  tagText = "LIMITED EDITION",
37}: ProductCard_04Props = {}) {
38  return (
39    <div className="group relative flex w-[320px] 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">
40      {/* Gradient badge  */}
41      {tagText && (
42        <div className="absolute top-3 left-3 z-10">
43          <span className="relative inline-block rounded-full bg-gradient-to-r from-indigo-500 to-indigo-700 px-3 py-1.5 text-xs font-semibold text-white">
44            {tagText}
45            <span className="absolute -top-1 -right-1 flex h-3 w-3">
46              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-indigo-400 opacity-75"></span>
47              <span className="relative inline-flex h-3 w-3 rounded-full bg-indigo-500"></span>
48            </span>
49          </span>
50        </div>
51      )}
52 
53      {/* Image container with background glow effect */}
54      <div className="relative overflow-hidden bg-gradient-to-br from-indigo-50 to-purple-50 p-6 dark:from-indigo-950/30 dark:to-purple-950/30">
55        <div className="absolute -bottom-10 left-1/2 h-40 w-40 -translate-x-1/2 transform rounded-full bg-indigo-500/20 blur-3xl"></div>
56        <div className="transition-transform duration-500 group-hover:scale-105">
57          <ImageViewer
58            imageUrl={imageUrl}
59            classNameThumbnailViewer="rounded-lg object-contain h-[180px] mx-auto"
60          />
61        </div>
62// … truncated