// กับข้าวคุณแม่ — Screen components & shared atoms // All UI lives here; app.jsx owns state and wires screens together. const { useState, useEffect, useMemo, useRef } = React; // ─── tiny helpers ────────────────────────────────────────────── const fmtBaht = (n) => '฿' + n.toLocaleString('th-TH'); const t = (lang, k) => window.T[lang] && window.T[lang][k] || k; // Generic food placeholder with stripes + name watermark function FoodPlaceholder({ c1 = '#ECD9B6', c2 = '#DCC197', label, size = 'md', round = false }) { const fs = size === 'sm' ? 11 : size === 'lg' ? 16 : 13; return (
{label}
); } // Spice chili icons function ChiliIcons({ n = 1, color = '#B91C1C', size = 11 }) { return ( {[...Array(Math.max(n, 1))].map((_, i) => )} ); } // Pill / chip function Chip({ children, active, onClick, style, color = 'var(--terra)' }) { return ( ); } // Quantity stepper function QtyStepper({ qty, setQty, min = 1, max = 99, size = 'md' }) { const d = size === 'sm' ? 28 : 36; const b = (sign, fn, dis) => ; return (
{b('−', () => setQty(Math.max(min, qty - 1)), qty <= min)}
{qty}
{b('+', () => setQty(Math.min(max, qty + 1)), qty >= max)}
); } // Bottom nav bar function BottomNav({ tab, setTab, cartCount, lang }) { const tabs = [ { id: 'menu', label: t(lang, 'nav_menu'), icon: }, { id: 'cart', label: t(lang, 'nav_cart'), icon: }, { id: 'order', label: t(lang, 'nav_order'), icon: }, { id: 'history', label: t(lang, 'nav_history'), icon: }]; return (
{tabs.map((tb) => { const active = tab === tb.id; return ( ); })}
); } // App header function AppHeader({ title, subtitle, onBack, right, dark = false }) { return (
{onBack && }
{subtitle &&
{subtitle}
}
{title}
{right}
); } // ───────────────────────────────────────────────────────────── // WELCOME (Table landing — after scanning the table QR) // ───────────────────────────────────────────────────────────── function WelcomeScreen({ lang, tableNo, onStart }) { return (
{/* warm sun + steam pattern */}
✺ EST. 2018 · ตามสั่งคุณแม่

{t(lang, 'brand')}

{t(lang, 'tagline')}
{/* hero plate */}
[ photo of mom's signature dish ]
{tableNo}
{t(lang, 'welcome_hi')} 🌿
{t(lang, 'welcome_table')} {tableNo}
{t(lang, 'welcome_note')}
); } // ───────────────────────────────────────────────────────────── // MENU // ───────────────────────────────────────────────────────────── function MenuItemCard({ item, lang, layout, onTap }) { const name = lang === 'th' ? item.th : item.en; const desc = lang === 'th' ? item.descTh : item.descEn; const phLabel = lang === 'th' ? `[ ${item.th} ]` : `[ ${item.en} ]`; if (layout === 'list') { return ( ); } // grid return ( ); } function MenuScreen({ lang, layout, setLayout, onOpenItem, tableNo }) { const [cat, setCat] = useState('all'); const [q, setQ] = useState(''); const filtered = useMemo(() => { return window.MENU.filter((m) => { if (cat !== 'all' && m.cat !== cat) return false; if (q) { const hay = (m.th + ' ' + m.en + ' ' + m.descTh + ' ' + m.descEn).toLowerCase(); if (!hay.includes(q.toLowerCase())) return false; } return true; }); }, [cat, q]); const popular = useMemo(() => window.MENU.filter((m) => m.popular).slice(0, 5), []); return (
{/* Header */} {['grid', 'list'].map((L) => )}
} /> {/* Search */}
setQ(e.target.value)} placeholder={t(lang, 'menu_search')} style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14, color: 'var(--brown-900)' }} /> {q && }
{/* Categories */}
{window.CATEGORIES.map((c) => setCat(c.id)}> {lang === 'th' ? c.th : c.en} )}
{/* Popular strip (only when viewing all) */} {cat === 'all' && !q &&
♥ {t(lang, 'popular')}
5/{window.MENU.length}
{popular.map((m) => { const name = lang === 'th' ? m.th : m.en; return ( ); })}
} {/* Section header */}
{cat === 'all' ? lang === 'th' ? 'เมนูทั้งหมด' : 'Full menu' : lang === 'th' ? window.CATEGORIES.find((c) => c.id === cat).th : window.CATEGORIES.find((c) => c.id === cat).en }
{filtered.length} {lang === 'th' ? 'รายการ' : 'items'}
{/* Items */}
{filtered.map((m) => onOpenItem(m)} /> )} {filtered.length === 0 &&
{lang === 'th' ? 'ไม่พบเมนูที่ค้นหา' : 'No menu items found'}
}
); } // expose Object.assign(window, { FoodPlaceholder, ChiliIcons, Chip, QtyStepper, BottomNav, AppHeader, fmtBaht, tt: t, WelcomeScreen, MenuScreen });