Designs.jsx

1import { Breadcrumbs } from "../components/Breadcrumbs.jsx";2import { Life } from "../components/Life.jsx";3import { MORE_TILE, SHOP } from "../config/shop.ts";4import { PRIMARIES, tileUrl } from "../lib/shop.ts";56export function DesignCard({ design, life = true, now }) {7  return (8    <a className="card" href={`${SHOP}?design=${design.design}`}>9      <span className="shot">10        {PRIMARIES.map((primary) => (11          <img key={primary} className={`pixel ${primary}`} src={tileUrl(design.design, primary, MORE_TILE)} alt={design.design} width="270" height="270" loading="lazy" decoding="async" />12        ))}13      </span>14      <h3 className="mono">{design.design}</h3>15      <span className="price">16        {design.count} {design.count === 1 ? "product" : "products"}17        {life ? <> · <Life born={design.released} now={now} /></> : null}18      </span>19    </a>20  );21}2223export function DesignGrid({ designs, now }) {24  return (25    <div className="grid designs">26      {designs.map((one) => (27        <DesignCard key={one.design} design={one} now={now} />28      ))}29    </div>30  );31}3233export function Designs({ trail, title, lead, designs, now }) {34  return (35    <div className="wrap">36      <Breadcrumbs trail={trail} />37      <div className="page-head">38        <h1>{title}</h1>39        {lead ? <p className="lead">{lead}</p> : null}40      </div>41      <DesignGrid designs={designs} now={now} />42    </div>43  );44}