product-card-05-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormatSale from "@/components/commerce-ui/price-format-sale";
5import { Button } from "@/components/ui/button";
6 
7const DEFAULT_IMAGE_URL =
8  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/shoes-02.jpg";
9 
10interface ProductCard_05Props {
11  imageUrl?: string;
12  promoText?: string;
13  productName?: string;
14  description?: string;
15  originalPrice?: number;
16  salePrice?: number;
17  discountPercentage?: number;
18  onAddToCart?: () => void;
19  onBuyNow?: () => void;
20  isBestseller?: boolean;
21  currencyPrefix?: string;
22}
23 
24function ProductCard_05({
25  currencyPrefix = "$",
26  description = "Lightweight, responsive running shoes with breathable mesh and enhanced cushioning for maximum comfort.",
27  discountPercentage = 33,
28  imageUrl = DEFAULT_IMAGE_URL,
29  isBestseller = true,
30  onAddToCart = () => {},
31  onBuyNow = () => {},
32  originalPrice = 150,
33  productName = "AeroStride Performance Runner",
34  promoText = "FLASH SALE",
35  salePrice = 99.95,
36}: ProductCard_05Props = {}) {
37  return (
38    <div className="group relative flex w-[330px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900">
39      {/* Sale tag */}
40      {promoText && (
41        <div className="absolute top-5 left-0 z-10">
42          <div className="relative overflow-hidden">
43            <div className="flex h-9 items-center bg-gradient-to-r from-rose-600 to-red-500 px-4 py-1.5 shadow-lg">
44              <span className="animate-pulse text-sm font-bold tracking-wider text-white">
45                {promoText}
46              </span>
47              <div className="ml-2 flex items-center justify-center rounded-full bg-white px-1.5 py-0.5 text-xs font-bold text-rose-600">
48                {discountPercentage}%
49              </div>
50            </div>
51            <div className="absolute top-0 -right-4 h-0 w-0 border-t-9 border-r-8 border-b-8 border-l-0 border-t-red-500 border-r-transparent border-b-transparent"></div>
52          </div>
53        </div>
54      )}
55 
56      {/* Bestseller badge */}
57      {isBestseller && (
58        <div className="absolute top-3 right-3 z-10 overflow-hidden rounded-full bg-amber-500 px-3 py-0.5 text-xs font-bold text-white shadow-md">
59          BESTSELLER
60        </div>
61      )}
62 
63      {/* Image container with gradient background */}
64// … truncated