ProductCard.jsx

1import { MORE_TILE } from "../config/shop.ts";2import { grid, money, PRIMARIES, productUrl, tileUrl } from "../lib/shop.ts";3import { Life } from "./Life.jsx";45function Shot({ product, primary, width, eager, tiles }) {6  const image = product[primary];7  const loading = eager ? "eager" : "lazy";8  if (tiles) return <img className={`pixel ${primary}`} src={tileUrl(product.design, primary, MORE_TILE)} alt={`${product.title} ${product.design}`} width="270" height="270" loading={loading} decoding="async" />;9  if (image) return <img className={primary} src={grid(image.url, width)} alt={image.alt || product.title} width={width} height={width} loading={loading} decoding="async" />;10  return <img className={`tile ${primary}`} src={tileUrl(product.design, primary, 3)} alt={product.title} width="88" height="88" loading="lazy" decoding="async" />;11}1213export function ProductCard({ product, width = 800, eager = false, tiles = false, life = true, hidden = false, now }) {14  return (15    <a className="card" href={productUrl(product.key)} hidden={hidden || undefined}>16      <span className="shot">17        {PRIMARIES.map((primary) => (18          <Shot key={primary} product={product} primary={primary} width={width} eager={eager} tiles={tiles} />19        ))}20      </span>21      <h3 className={tiles ? "mono" : undefined}>{tiles ? product.design : product.title}</h3>22      <span className="price">23        {money(product.price)}24        {life ? <> · {product.released ? <Life born={product.released} now={now} /> : "in the batch"}</> : null}25      </span>26    </a>27  );28}