// Menu — grouped tabs (Beverages/Apps/Soups · Lunch Specials · Dinner)
// with sub-sections, GF badges, protein-tiered pricing, header notes & footnotes.
const menuDS = window.ThaiVillageCuisineDesignSystem_bfe0b3;
function GFTag() {
return (
Gluten Free
);
}
// One [label, price] (or label + sizes) chip in the inline tier row
function TierChips({ tiers }) {
return (
{tiers.map((t, i) => (
{t.label}
{t.sizes && (
{t.sizes.map((sl, j) => (
{sl}
))}
)}
))}
);
}
function MenuItemRow({ item, compact }) {
const showPrice = item.price != null && !item.tiers;
return (
{item.code && (
{item.code}
)}
{item.name}
{item.gf && }
{item.desc &&
{item.desc}
}
{item.note &&
{item.note}
}
{item.tiers &&
}
{showPrice && (
<>
${item.price}
)}
);
}
function MenuSection({ section }) {
const { Badge } = menuDS;
return (
{section.cat}
{section.items.length} items
{section.subtitle &&
{section.subtitle}
}
{section.headerNote && (
{section.headerNote}
)}
{section.simple ? (
{section.items.map((it, i) => (
))}
) : (
section.items.map((it, i) =>
)
)}
{section.note &&
{section.note}
}
{section.footnote &&
{section.footnote}
}
);
}
// Icons for the Digital / Original toggle
function DigitalIcon() {
return (
);
}
function OriginalIcon() {
return (
);
}
// Lightbox for full-page viewing of the original printed menu
function MenuLightbox({ pages, index, onClose, onStep }) {
React.useEffect(() => {
const onKey = (e) => {
if (e.key === 'Escape') onClose();
else if (e.key === 'ArrowLeft') onStep(-1);
else if (e.key === 'ArrowRight') onStep(1);
};
document.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
}, [onClose, onStep]);
const p = pages[index];
const navBtn = {
position: 'absolute', top: '50%', transform: 'translateY(-50%)', zIndex: 2,
width: 52, height: 52, borderRadius: '50%', border: 'none', cursor: 'pointer',
background: 'var(--cream-50)', color: 'var(--char-900)',
display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-md)',
};
return (
{p.label} Page {index + 1} of {pages.length}
);
}
// Original printed-menu page gallery
function OriginalMenu({ onOpen }) {
const { MENU_PAGES } = window;
return (
Our full printed menu — {MENU_PAGES.length} pages. Tap any page to zoom in.
{MENU_PAGES.map((p, i) => (
))}
);
}
function Menu() {
const { SectionHeading } = menuDS;
const { MENU_GROUPS, MENU_DISCLAIMER, MENU_PAGES } = window;
const [view, setView] = React.useState('digital'); // 'digital' | 'original'
const [active, setActive] = React.useState(0);
const [lb, setLb] = React.useState(null); // lightbox page index or null
const group = MENU_GROUPS[active];
const isDigital = view === 'digital';
const viewToggle = (
{[['digital', 'Digital Menu', ], ['original', 'Paper Menu', ]].map(([key, label, icon]) => {
const on = view === key;
return (
);
})}
);
return (
);
}
window.Menu = Menu;