demo/acme-web code browser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { formatMoney } from "../lib/money";
import { Button } from "../ui/Button";
import { useCart } from "./store";

export function CartPage() {
  const cart = useCart();
  if (cart.lines.length === 0) return <p>Your cart is empty.</p>;
  return (
    <section>
      <h2>Cart</h2>
      <ul>
        {cart.lines.map((l) => (
          <li key={l.product.id}>
            {l.quantity} × {l.product.name} {formatMoney(l.product.price)}
            <Button variant="secondary" onClick={() => cart.remove(l.product.id)}>
              Remove
            </Button>
          </li>
        ))}
      </ul>
      <p>Total {formatMoney(cart.total("USD"))}</p>
      <a href="/checkout">Check out</a>
    </section>
  );
}