MoreVariations.jsx

1import { MORE_TILE } from "../config/shop.ts";2import { PRIMARIES, tileUrl } from "../lib/shop.ts";34export function MoreVariations({ family, current, title, shop }) {5  if (family.length < 2) return null;6  return (7    <section className="variations" aria-labelledby="variations">8      <h2 id="variations" className="fine">9        <a href={shop}>{`More Variations of ${title}`}</a>10      </h2>11      <div className="tiles">12        {family.map((one) => (13          <a key={one.design} href={one.href} aria-label={`${title} ${one.design}`} aria-current={one.design === current ? "page" : undefined} data-stay>14            {PRIMARIES.map((primary) => (15              <img key={primary} className={primary} src={tileUrl(one.design, primary, MORE_TILE)} alt="" width="88" height="88" loading="lazy" decoding="async" />16            ))}17          </a>18        ))}19      </div>20    </section>21  );22}