Product Card

1// Grid tile. Styled with base44 design tokens (shadcn Tailwind classes: bg-card / text-foreground /
2// border-border) — re-skin via the app's design tokens (src/index.css :root/.dark), not this JSX.
3// The image `//`-protocol fix and the price / out-of-stock field paths are load-bearing.
4import { Link } from "react-router-dom";
5
6function productImage(product) {
7  const url = product?.media?.main?.image?.url;
8  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
9}
10
11export default function ProductCard({ product }) {
12  const image = productImage(product);
13  const price = product?.actualPriceRange?.minValue?.formattedAmount;
14  const compareAt = product?.compareAtPriceRange?.minValue?.formattedAmount;
15  const soldOut = product?.inventory?.availabilityStatus === "OUT_OF_STOCK";
16
17  return (
18    <Link to={`/product/${product.slug}`}
19      className="flex flex-col no-underline text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm">
20      <div className="relative aspect-square bg-background">
21        {image
22          ? <img src={image} alt={product.name} loading="lazy" className="w-full h-full object-cover" />
23          : <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true"><svg viewBox="0 0 24 24" className="w-8 h-8 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx=
24        {soldOut && (
25          <span className="absolute top-2 left-2 px-2 py-0.5 text-xs bg-destructive text-white rounded-sm">Sold out</span>
26        )}
27      </div>
28      <div className="p-3 flex flex-col gap-1">
29        <h3 className="m-0 font-display text-[15px] font-semibold">{product.name}</h3>
30        <div className="flex gap-2 items-baseline">
31          <span className="font-semibold">{price}</span>
32          {compareAt && compareAt !== price && (
33            <span className="text-muted-foreground line-through text-[13px]">{compareAt}</span>
34          )}
35        </div>
36      </div>
37    </Link>
38  );
39}