Menu

1// Menu page — the restaurant's main render surface. Loads the assembled getFullMenu() tree once,
2// renders it via MenuList, and opens ItemDialog for a tapped dish (add-to-order lives there).
3// Empty state when there are no menus. Styled with base44 design tokens (shadcn Tailwind classes).
4import { useEffect, useState } from "react";
5import { getFullMenu } from "@/rest/wix-restaurants-menu";
6import MenuList from "@/components/MenuList";
7import ItemDialog from "@/components/ItemDialog";
8
9export default function Menu() {
10  const [menus, setMenus] = useState(null);
11  const [active, setActive] = useState(null);   // { item, menuId, sectionId }
12
13  useEffect(() => { getFullMenu().then(({ menus }) => setMenus(menus)); }, []);
14
15  return (
16    <main className="max-w-[1040px] mx-auto p-4">
17      <h1 className="font-display mb-4">Menu</h1>
18      {menus === null
19        ? <p className="text-muted-foreground">Loading…</p>
20        : <MenuList menus={menus} onOpenItem={(item, ctx) => setActive({ item, ...ctx })}
21            empty="No menu yet — add one from your Wix dashboard." />}
22      {active && (
23        <ItemDialog item={active.item} menuId={active.menuId} sectionId={active.sectionId}
24          onClose={() => setActive(null)} />
25      )}
26    </main>
27  );
28}