Product Card

1import * as React from "react";
2import { Badge } from "@/components/ui/atoms/badge";
3import {
4  Card,
5  CardFooter,
6  CardHeader,
7  CardHeading,
8  CardImage,
9  CardTitle,
10  type CardProps,
11} from "@/components/ui/atoms/card";
12import { StarRating } from "@/components/ui/blocks/card-templates/star-rating";
13import { cn } from "@/lib/utils";
14 
15export interface ProductCardProps extends Omit<CardProps, "title"> {
16  image: string;
17  title: string;
18  price: string;
19  originalPrice?: string;
20  rating?: number;
21  badge?: string;
22  action?: React.ReactNode;
23  href?: string;
24}
25const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(
26  (
27    { action, badge, className, href, image, originalPrice, price, rating, title, ...props },
28    ref,
29  ) => {
30    const content = (
31      <Card
32        ref={ref}
33        variant="interactive"
34        className={cn("group overflow-hidden", className)}
35        {...props}
36      >
37        <CardImage className="relative">
38          <img
39            src={image}
40            alt=""
41            className="size-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
42          />
43          {badge && <Badge className="absolute right-2 top-2">{badge}</Badge>}
44        </CardImage>
45        <CardHeader>
46          <CardHeading>
47            <CardTitle className="line-clamp-1">{title}</CardTitle>
48            {rating != null && <StarRating rating={rating} />}
49            <div className="flex items-baseline gap-2">
50              <span className="font-semibold">{price}</span>
51              {originalPrice && (
52                <span className="text-xs text-muted-foreground line-through">{originalPrice}</span>
53              )}
54            </div>
55          </CardHeading>
56        </CardHeader>
57        {action && <CardFooter>{action}</CardFooter>}
58      </Card>
59    );
60    return href ? (
61      <a href={href} className="block text-inherit no-underline">
62        {content}
63      </a>
64    ) : (
65      content
66    );
67  },
68);
69ProductCard.displayName = "ProductCard";
70export { ProductCard };