product-card-06-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/speaker-01.jpg";
9 
10interface ProductCard_06Props {
11  imageUrl?: string;
12  newRelease?: boolean;
13  productName?: string;
14  description?: string;
15  price?: number;
16  availableStock?: number;
17  releaseDate?: string;
18  features?: string[];
19  onAddToCart?: () => void;
20  onPreOrder?: () => void;
21  currencyPrefix?: string;
22}
23 
24function ProductCard_06({
25  availableStock = 24,
26  currencyPrefix = "$",
27  description = "Next-generation portable speaker with 360° spatial audio and 24-hour battery life",
28  features = [
29    "360° Immersive Sound",
30    "Waterproof Design",
31    "Voice Assistant",
32    "Multi-room Sync",
33  ],
34  imageUrl = DEFAULT_IMAGE_URL,
35  newRelease = true,
36  onAddToCart = () => {},
37  onPreOrder = () => {},
38  price = 199.99,
39  productName = "SoundSphere Ultra Wireless Speaker",
40  releaseDate = "August 15, 2023",
41}: ProductCard_06Props = {}) {
42  const isLowStock = availableStock <= 25;
43 
44  return (
45    <div className="group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:shadow-md sm:h-[220px] sm:flex-row dark:border-gray-800 dark:bg-gray-900">
46      {/* Image section with highlight effect */}
47      <div className="relative h-52 w-full bg-gradient-to-br from-sky-50 via-blue-50 to-indigo-50 sm:h-full sm:w-2/5 dark:from-gray-900 dark:via-blue-950/20 dark:to-gray-900">
48        {newRelease && (
49          <div className="absolute top-3 left-3 z-10 flex items-center justify-center">
50            <div className="animate-pulse-slow rounded-full bg-blue-600 px-3 py-1 text-xs font-bold tracking-wider text-white uppercase shadow-md">
51              Just Released
52            </div>
53          </div>
54        )}
55 
56        {/* Highlight glow effect */}
57        <div className="absolute inset-0">
58          <div className="absolute -top-10 -left-10 h-32 w-32 rounded-full bg-blue-300/30 blur-2xl"></div>
59          <div className="absolute right-0 -bottom-8 h-28 w-28 rounded-full bg-indigo-400/20 blur-xl"></div>
60        </div>
61 
62        {/* Image with hover effect */}
63        <div className="flex h-full items-center justify-center p-4">
64// … truncated