product-card

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7/* ------------------------------------------------------------------
8 * Context for sharing state between compound components
9 * ------------------------------------------------------------------ */
10 
11type ProductCardVariant = "default" | "inner"
12type ProductCardSize = "default" | "sm" | "small" | "lg" | "large"
13 
14interface ProductCardContextValue {
15  variant: ProductCardVariant
16  size: ProductCardSize
17  animated: boolean
18}
19 
20const ProductCardContext = React.createContext<ProductCardContextValue | null>(
21  null
22)
23 
24function useProductCardContext() {
25  const context = React.useContext(ProductCardContext)
26  if (!context) {
27    throw new Error(
28      "ProductCard compound components must be used within <ProductCard>"
29    )
30  }
31  return context
32}
33 
34function normalizeSize(size: ProductCardSize): "default" | "sm" | "lg" {
35  if (size === "small") return "sm"
36  if (size === "large") return "lg"
37  return size as "default" | "sm" | "lg"
38}
39 
40/* ------------------------------------------------------------------
41 * ProductCard (root)
42 * ------------------------------------------------------------------ */
43 
44interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
45  /** Card variant - "default" shows content below image, "inner" shows content inside */
46  variant?: ProductCardVariant
47  /** Card size - "sm" | "small", "default", or "lg" | "large" */
48  size?: ProductCardSize
49  /** Enable hover/active animation on image - defaults to true */
50  animated?: boolean
51  /** Callback when the card is clicked */
52  onCardClick?: () => void
53}
54 
55const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(
56  (
57    {
58      className,
59      variant = "default",
60      size = "default",
61      animated = true,
62      onCardClick,
63      children,
64      ...props
65    },
66    ref
67  ) => {
68    return (
69      <ProductCardContext.Provider value={{ variant, size, animated }}>
70        <div
71          ref={ref}
72          className={cn("cursor-pointer overflow-hidden rounded-lg", className)}
73          onClick={onCardClick}
74          {...props}
75        >
76          {children}
77        </div>
78      </ProductCardContext.Provider>
79    )
80  }
81)
82ProductCard.displayName = "ProductCard"
83 
84/* ------------------------------------------------------------------
85 * ProductCardImage
86 * ------------------------------------------------------------------ */
87 
88// … truncated