An ecommerce product card showing a photo with an optional hover shot, a sale/new badge, price with a struck-through old price, color swatches, a wishlist toggle, and an add-to-cart button that reports its own loading and success state.
"use client";
import ProductCard from "@/components/ui/product-card";
import { useState } from "react";
/** Product shots drawn as SVG, so the demo needs no network and no image files. */
const shot = (
backdrop: string,
body: string,
shade: string,
shape: "tee" | "mug" | "bag" = "tee",
) => {
const figure =
shape === "mug"
? `<rect x='220' y='190' width='200' height='230' rx='26' fill='${body}'/><path d='M420 240 h40 a50 50 0 0 1 0 110 h-40' fill='none' stroke='${body}' stroke-width='26'/><rect x='220' y='190' width='200' height='34' rx='14' fill='${shade}'/>`
: shape === "bag"
? `<path d='M250 250 q70 -150 140 0' fill='none' stroke='${shade}' stroke-width='18'/><rect x='190' y='240' width='260' height='230' rx='22' fill='${body}'/><rect x='190' y='300' width='260' height='16' fill='${shade}'/>`
: `<path d='M230 170 L290 150 Q320 180 350 150 L410 170 L470 230 L430 270 L410 255 L410 470 L230 470 L230 255 L210 270 L170 230Z' fill='${body}'/><path d='M290 150 Q320 180 350 150' fill='none' stroke='${shade}' stroke-width='10'/>`;
return `data:image/svg+xml;utf8,${encodeURIComponent(
`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><rect width='640' height='640' fill='${backdrop}'/><ellipse cx='320' cy='540' rx='190' ry='24' fill='${shade}' opacity='.25'/>${figure}</svg>`,
)}`;
};
export default function ProductCardDemo() {
const [cart, setCart] = useState(0);
const add = () =>
new Promise<void>((resolve) =>
setTimeout(() => {
setCart((count) => count + 1);
resolve();
}, 900),
);
return (
<div className="flex w-full flex-col gap-3 bg-canvas p-6">
<p className="text-[11px] font-semibold text-ink-faint">
Cart: {cart} {cart === 1 ? "item" : "items"}
</p>
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
<ProductCard
title="Everyday organic tee"
href="#tee"
badge="sale"
image={{
src: shot("#eef1ea", "#9fb49a", "#6f8a6a"),
alt: "Sage organic cotton t-shirt, front",
}}
hoverImage={{ src: shot("#e4e9df", "#8aa385", "#5c7657"), alt: "" }}
price={28}
compareAtPrice={38}
rating={{ value: 4.4, count: 1214 }}
swatches={[
{ value: "sage", label: "Sage", color: "#9fb49a" },
{ value: "oat", label: "Oat", color: "#e6dccb" },
{ value: "ink", label: "Ink", color: "#2b2f36" },
]}
onAddToCart={add}
/>
<ProductCard
title="Stoneware mug, 350 ml"
href="#mug"
badge="new"
image={{
src: shot("#f3efe8", "#d8cbb5", "#a8977c", "mug"),
alt: "Speckled cream stoneware mug",
}}
price={22}
rating={{ value: 4.8, count: 86 }}
onAddToCart={add}
defaultWishlisted
/>
<ProductCard
title="Waxed canvas tote"
href="#tote"
image={{
src: shot("#ecefe9", "#6b6f4f", "#4a4d35", "bag"),
alt: "Olive waxed canvas tote bag",
}}
price={64.5}
swatches={[
{ value: "olive", label: "Olive", color: "#6b6f4f" },
{ value: "tan", label: "Tan", color: "#b38a5a" },
]}
onAddToCart={add}
/>
</div>
</div>
);
}