type Cake = {
  id: string;
  name: string;
  price: number;
};

export const data = {
  cakes: [] as Cake[],
};

export const onStart = async () => {
  data.cakes = await fetchGet<Cake[]>("/api/cakes");
};

export default () => (
  <main class="space-y-4 p-8">
    <h1 class="text-2xl font-bold">Cake Menu</h1>
    <ul class="space-y-2">
      {data.cakes.map((cake) => (
        <li key={cake.id} class="flex justify-between rounded border p-3">
          <span>{cake.name}</span>
          <b>${cake.price}</b>
        </li>
      ))}
    </ul>
  </main>
);