demo/acme-web code browser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { useEffect, useState } from "react";
import { listProducts, type Product } from "../api/client";
import { ProductCard } from "./ProductCard";

export function ProductList() {
  const [products, setProducts] = useState<Product[] | null>(null);
  useEffect(() => {
    listProducts().then(setProducts);
  }, []);
  if (!products) return <p>Loading…</p>;
  return (
    <ul className="grid">
      {products.map((p) => (
        <ProductCard key={p.id} product={p} />
      ))}
    </ul>
  );
}