A connected workspace for understanding and building products.

1export function DeliveryOptions({ options }: Props) {
2  return (
3    <section crux-attr="ex-514206" className="delivery">
4      <h2>Choose delivery</h2>
5
6      {options.map((option) => (
7        <label key={option.id} className="option">
8          <input type="radio" name="delivery" value={option.id} />
9          <span className="name">{option.name}</span>
10          {/* cost and date land together — see ex-514206 */}
11          <span className="meta">
12            {formatCost(option.cost)} · arrives {option.eta}
13          </span>
14        </label>
15      ))}
16    </section>
17  );
18}