product-card-07-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat from "@/components/commerce-ui/price-format-basic";
5import StarRating_Fractions from "@/components/commerce-ui/star-rating-fractions";
6import { Button } from "@/components/ui/button";
7import {
8  Check,
9  ChevronLeft,
10  ChevronRight,
11  MessageSquareText,
12} from "lucide-react";
13import { useState } from "react";
14 
15const DEFAULT_IMAGE_URL =
16  "https://images.pexels.com/photos/6883802/pexels-photo-6883802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1";
17 
18interface Testimonial {
19  name: string;
20  role?: string;
21  rating: number;
22  text: string;
23  date?: string;
24}
25 
26interface ProductCard_07Props {
27  imageUrl?: string;
28  productName?: string;
29  description?: string;
30  price?: number;
31  inStock?: boolean;
32  features?: string[];
33  testimonials?: Testimonial[];
34  onAddToCart?: () => void;
35  onBuyNow?: () => void;
36  currencyPrefix?: string;
37}
38 
39function ProductCard_07({
40  currencyPrefix = "$",
41  description = "Professional-grade mirrorless camera with 32MP sensor and 4K video recording capabilities",
42  features = [
43    "32 Megapixel Sensor",
44    "4K Video Recording",
45    "5-Axis Stabilization",
46    "Weather-Sealed Body",
47  ],
48  imageUrl = DEFAULT_IMAGE_URL,
49  inStock = true,
50  onAddToCart = () => {},
51  onBuyNow = () => {},
52  price = 1299.99,
53  productName = "ProCapture X3 Digital Camera",
54  testimonials = [
55    {
56      date: "3 weeks ago",
57      name: "Michael Roberts",
58      rating: 5,
59      role: "Professional Photographer",
60      text: "The image quality is exceptional. I've switched from my DSLR and haven't looked back.",
61    },
62    {
63      date: "1 month ago",
64      name: "Sarah Chen",
65      rating: 4,
66      role: "Content Creator",
67      text: "Perfect for my YouTube videos. The autofocus is lightning fast!",
68    },
69    {
70      date: "2 months ago",
71      name: "Alex Johnson",
72      rating: 5,
73      text: "Worth every penny. The low light performance is incredible.",
74    },
75  ],
76}: ProductCard_07Props = {}) {
77  const [activeTestimonial, setActiveTestimonial] = useState(0);
78 
79  return (
80    <div className="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
81      {/* Main product card */}
82      <div className="group flex flex-col sm:h-[220px] sm:flex-row">
83        {/* Image section */}
84// … truncated