Build: The React Bike Configurator

The whole file after this topic. If yours differs, you can copy this one and carry on.

// Configurator.jsx: the Lumen Volt configurator (Phase 15). One colour, any accessories, a price that counts to the new total.
import { useEffect, useState, useSyncExternalStore } from "react";
import { AnimatePresence, MotionConfig, animate, motion, useMotionValue, useTransform } from "motion/react";
import { motionAllowed, motionChoice, onMotionChange } from "../js/motion/prefers-reduced.js";

const BASE = 2490;
const COLOURS = [
  { id: "ember", name: "Ember", hex: "#ff6b2c", extra: 0 },
  { id: "harbour", name: "Harbour", hex: "#2a9df4", extra: 0 },
  { id: "ink", name: "Ink", hex: "#1b1a22", extra: 40 },
];
const EXTRAS = [
  { id: "lock", name: "Lock", price: 39 },
  { id: "lights", name: "Lights", price: 29 },
  { id: "rack", name: "Rack", price: 45 },
  { id: "bell", name: "Bell", price: 9 },
  { id: "basket", name: "Basket", price: 35 },
  { id: "helmet", name: "Helmet", price: 59 },
];
const euro = (n) => "€" + Math.round(n).toLocaleString("en-US");

// The visitor's setting is the authority (Phase 7): "reduced" and "full" win over the device, "system" follows it.
function useMotionMode() {
  useSyncExternalStore(onMotionChange, motionAllowed); // re-render when the setting or the device changes
  const choice = motionChoice();
  return choice === "reduced" ? "always" : choice === "full" ? "never" : "user";
}

function Price({ total }) {
  const shown = useMotionValue(total); // the number on screen: changes every frame without re-rendering React
  const text = useTransform(shown, euro);
  useEffect(() => {
    if (!motionAllowed()) { shown.set(total); return; } // calm: the new price just appears
    const controls = animate(shown, total, { duration: 0.5, ease: "easeOut" });
    return () => controls.stop(); // stops the count if the component goes away mid-count
  }, [total, shown]);
  return (
    <>
      <motion.output className="cfg-price" aria-hidden="true">{text}</motion.output>
      <span className="cfg-sr" role="status">Total {euro(total)}</span>
    </>
  );
}

export default function Configurator() {
  const mode = useMotionMode();
  const [colour, setColour] = useState(COLOURS[0]);
  const [fitted, setFitted] = useState([]);
  const total = BASE + colour.extra + fitted.reduce((sum, id) => sum + EXTRAS.find((x) => x.id === id).price, 0);
  const toggle = (id) => setFitted((list) => (list.includes(id) ? list.filter((x) => x !== id) : [...list, id]));

  return (
    <MotionConfig reducedMotion={mode}>
      <div className="cfg">
        <motion.svg className="cfg-bike" viewBox="0 0 220 110" role="img" aria-label={"Lumen Volt in " + colour.name} fill="none" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="45" cy="78" r="24" stroke="currentColor" />
          <circle cx="175" cy="78" r="24" stroke="currentColor" />
          <motion.path d="M45 78 L85 38 H140 L175 78 M85 38 L110 78 H45 M110 78 L140 38" animate={{ stroke: colour.hex }} initial={false} />
        </motion.svg>

        <div className="cfg-panel">
          <div role="group" aria-label="Colour" className="cfg-swatches">
            {COLOURS.map((c) => (
              <button key={c.id} type="button" className="cfg-swatch" style={{ background: c.hex }} aria-pressed={colour.id === c.id} aria-label={c.name + (c.extra ? ", plus " + euro(c.extra) : "")} onClick={() => setColour(c)}>
                {colour.id === c.id && <motion.span layoutId="cfg-ring" className="cfg-ring" transition={{ type: "spring", stiffness: 500, damping: 35 }} />}
              </button>
            ))}
          </div>

          <div role="group" aria-label="Accessories" className="cfg-extras">
            {EXTRAS.map((x) => (
              <button key={x.id} type="button" className="cfg-chip" aria-pressed={fitted.includes(x.id)} onClick={() => toggle(x.id)}>{x.name} <small>{euro(x.price)}</small></button>
            ))}
          </div>

          <ul className="cfg-fitted" aria-label="Fitted accessories">
            <AnimatePresence mode="popLayout" initial={false}>
              {fitted.map((id) => (
                <motion.li key={id} layout initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }}>
                  {EXTRAS.find((x) => x.id === id).name}
                </motion.li>
              ))}
            </AnimatePresence>
          </ul>
          {fitted.length === 0 && <p className="cfg-empty">No accessories yet. Pick any above.</p>}

          <p className="cfg-total">Your Volt <Price total={total} /></p>
        </div>
      </div>
    </MotionConfig>
  );
}