Card de Produto Premium

import { useState } from "react";
import "./styles.css";

const TAMANHOS = ["38", "39", "40", "41", "42"];

export default function App() {
  const [tamanho, setTamanho] = useState("40");
  const [estado, setEstado] = useState("idle");

  function adicionar() {
    if (estado !== "idle") return;
    setEstado("adding");
    setTimeout(function () { setEstado("added"); }, 700);
    setTimeout(function () { setEstado("idle"); }, 3400);
  }

  return (
    <div className="stage">
      <article className="card">
        <div className="foto">
          <img
            className="img principal"
            src="https://picsum.photos/seed/runner-frente/620/620"
            alt="Tênis Runner Pro visto de frente"
          />
          <img
            className="img alternativa"
            src="https://picsum.photos/seed/runner-lado/620/620"
            alt="Tênis Runner Pro visto de lado"
          />
          <span className="selo">NOVO</span>
          <span className="cashback">5% de cashback</span>
        </div>

        <div className="info">
          <span className="marca">VELOX ORIGINALS</span>
          <h3>Tênis Runner Pro Knit</h3>
          <div className="avaliacao">
            <span className="estrelas">★★★★★</span>
            <em>4,9 (1.284)</em>
          </div>

          <div className="linha-tamanhos">
            <span className="rotulo">Tamanho</span>
            <div className="tamanhos">
              {TAMANHOS.map(function (t) {
                return (
                  <button
                    key={t}
                    className={t === tamanho ? "tam ativo" : "tam"}
                    onClick={function () { setTamanho(t); }}
                  >
                    {t}
                  </button>
                );
              })}
            </div>
          </div>

          <div className="preco">
            <div className="valores">
              <s>R$ 499,90</s>
              <strong>R$ 349,90</strong>
            </div>
            <span className="parcelas">ou 10x de R$ 34,99 sem juros</span>
          </div>

          <button className={"comprar " + estado} onClick={adicionar}>
            {estado === "adding" && <span className="spinner" />}
            {estado === "added" && <span className="check">✓</span>}
            <span className="texto-botao">
              {estado === "added" ? "Adicionado à sacola" : "Adicionar à sacola"}
            </span>
          </button>
        </div>
      </article>
    </div>
  );
}