Product List

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { cn } from '@/lib/utils'
5import { Check, ChevronLeft, ChevronRight, ShoppingCart, Star } from 'lucide-react'
6import { useCallback, useState } from 'react'
7 
8// Import types from shared types file to avoid circular dependencies
9import type { Product } from './types'
10// Re-export for backward compatibility
11export type { Product } from './types'
12 
13import { demoProducts } from './demo/list'
14 
15 
16/**
17 * ═══════════════════════════════════════════════════════════════════════════
18 * ProductListProps
19 * ═══════════════════════════════════════════════════════════════════════════
20 *
21 * Props for configuring a versatile product list component with list, grid,
22 * carousel, and picker variants.
23 */
24export interface ProductListProps {
25  data?: {
26    /** Array of products to display in the list. */
27    products?: Product[]
28  }
29  actions?: {
30    /** Called when a user selects a product from the list. */
31    onSelectProduct?: (product: Product) => void
32    /** Called when products are added to cart (picker variant only). */
33    onAddToCart?: (products: Product[]) => void
34  }
35  appearance?: {
36    /**
37     * Layout variant for displaying products.
38     * @default "list"
39     */
40    variant?: 'list' | 'grid' | 'carousel' | 'picker'
41    /**
42     * Currency code for price formatting (e.g., "USD", "EUR").
43     * @default "EUR"
44     */
45    currency?: string
46    /**
47     * Number of columns for grid variant.
48     * @default 4
49     */
50    columns?: 3 | 4
51    /**
52     * Custom label for the add to cart button (picker variant).
53     * @default "Add to cart"
54     */
55    buttonLabel?: string
56  }
57  control?: {
58    /** Index of the currently selected product. */
59    selectedProductIndex?: number
60  }
61}
62 
63// Horizontal card for list variant
64function ProductHorizontalCard({
65  product,
66  selected,
67  onSelect,
68  formatCurrency
69}: {
70  product: Product
71  selected: boolean
72  onSelect: () => void
73  formatCurrency: (value: number) => string
74}) {
75  return (
76    <button
77      onClick={onSelect}
78      disabled={!product.inStock}
79      className={cn(
80// … truncated