Menu List

1// Renders the assembled getFullMenu() tree: menus → sections → item cards, with the empty state.
2// This is the menu render surface's body (the Menu page is a thin wrapper). Ordered already by
3// the helper (sectionIds / itemIds). Styled with base44 design tokens (shadcn Tailwind classes). Each
4// card's onOpen gets the item plus the menuId/sectionId it was shown under — ordering needs both.
5import MenuItemCard from "./MenuItemCard";
6
7function imageUrl(img) {
8  const url = img?.url;
9  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
10}
11
12export default function MenuList({ menus, onOpenItem, empty = "No menu yet — add one from your Wix dashboard." }) {
13  if (!menus?.length) {
14    return <p className="text-muted-foreground p-4 text-center">{empty}</p>;
15  }
16  return (
17    <div className="flex flex-col gap-8">
18      {menus.map((menu) => (
19        <section key={menu.id}>
20          <h2 className="font-display mb-1">{menu.name}</h2>
21          {menu.description && (
22            <p className="text-muted-foreground mb-4">{menu.description}</p>
23          )}
24          {menu.sections.map((section) => (
25            <div key={section.id} className="mb-6">
26              <h3 className="font-display mb-4">{section.name}</h3>
27              {imageUrl(section.image) && (
28                <img src={imageUrl(section.image)} alt={section.name} loading="lazy"
29                  className="w-full max-h-[220px] object-cover rounded-lg mb-4" />
30              )}
31              <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(260px,1fr))]">
32                {section.items.map((item) => (
33                  <MenuItemCard key={item.id} item={item}
34                    onOpen={() => onOpenItem?.(item, { menuId: menu.id, sectionId: section.id })} />
35                ))}
36              </div>
37            </div>
38          ))}
39        </section>
40      ))}
41    </div>
42  );
43}