Downloads.jsx

1import { useState } from "react";2import { tileUrl } from "../lib/shop.ts";3import { Carousel } from "./Gallery.jsx";4import { Icon } from "./Icon.jsx";56export function Downloads({ design, primary, tiles }) {7  const [index, setIndex] = useState(0);8  const url = (n) => tileUrl(design, primary, n);9  const slides = tiles.map((n) => ({ style: `tile-${n}`, thumb: url(n), full: url(n), link: url(n), alt: `${design} ${n}x${n}`, name: `${n}x${n}` }));10  const one = slides[index] ?? slides[0];11  return (12    <details className="drop files">13      <summary>14        <span>Downloads</span>15        <Icon name="expand_more" extra="small" />16      </summary>17      <div className="inside">18        <Carousel slides={slides} index={index} onIndex={setIndex} pixel label="Tile" />19        <p className="get">20          <a className="pill go wide" href={one.link} download>21            <Icon name="download" />22            <span>23              Download <span>{one.name}</span>24            </span>25          </a>26        </p>27      </div>28    </details>29  );30}