product-card-03-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/headphone-1.jpg";
10 
11interface ProductCard_03Props {
12  imageUrl?: string;
13  tagText?: string;
14  productName?: string;
15  originalPrice?: number;
16  salePrice?: number;
17  freeShipping?: boolean;
18  reviewCount?: number;
19  rating?: number;
20  maxRating?: number;
21  onAddToCart?: () => void;
22  onBuyNow?: () => void;
23  currencyPrefix?: string;
24}
25 
26function ProductCard_03({
27  currencyPrefix = "$",
28  freeShipping = true,
29  imageUrl = DEFAULT_IMAGE_URL,
30  maxRating = 5,
31  onAddToCart = () => {},
32  onBuyNow = () => {},
33  originalPrice = 199,
34  productName = "Wireless headset",
35  rating = 4.2,
36  reviewCount = 87,
37  salePrice = 179,
38  tagText = "NEW COLLECTION",
39}: ProductCard_03Props = {}) {
40  return (
41    <div className="group relative flex w-[250px] 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">
42      {/* Badge */}
43      {tagText && (
44        <div className="absolute top-3 left-3 z-10">
45          <span className="relative inline-block rounded-full bg-gradient-to-r from-rose-500 to-red-700 px-3 py-1.5 text-xs font-semibold text-white">
46            {tagText}
47            <span className="absolute -top-1 -right-1 flex h-3 w-3">
48              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-rose-400 opacity-75"></span>
49              <span className="relative inline-flex h-3 w-3 rounded-full bg-rose-500"></span>
50            </span>
51          </span>
52        </div>
53      )}
54 
55      {/* Image container with background glow effect */}
56      <div className="relative overflow-hidden bg-gradient-to-br from-rose-50 to-orange-50 p-6 dark:from-rose-950/30 dark:to-orange-950/30">
57        <div className="absolute -bottom-10 left-1/2 h-40 w-40 -translate-x-1/2 transform rounded-full bg-rose-500/20 blur-3xl"></div>
58        <div className="transition-transform duration-500 group-hover:scale-105">
59          <ImageViewer
60            imageUrl={imageUrl}
61            classNameThumbnailViewer="rounded-lg object-contain h-[160px] mx-auto"
62          />
63// … truncated