/* ============================================================ chrome.jsx — 頁首 / 手機選單 / 頁尾 / 購物車側欄 / 搜尋 / 通知 ============================================================ */ /* ---- 品牌標記 ---- */ function Brand({ onClick, compact }) { return (
🍌
蕉您來好康
{!compact &&
FARM SHOP
}
); } /* ---- 頁首 ---- */ function Header() { const app = useApp(); return (
app.navigate('home')} /> {/* 桌面導覽 — 平板以下由 CSS 隱藏(header > nav) */}
app.navigate('account')} />
); } /* ---- 手機選單 ---- */ function MobileMenu() { const app = useApp(); if (!app.menuOpen) return null; return (
e.stopPropagation()} style={{ background: 'var(--bg-page)', padding: '18px 22px 26px', borderBottomLeftRadius: 22, borderBottomRightRadius: 22, animation: 'fadeIn .2s ease', }}>
); } /* ---- 頁尾 ---- */ function Footer() { const app = useApp(); return ( ); } /* ---- 購物車側欄 ---- */ function CartDrawer() { const app = useApp(); if (!app.cartOpen) return null; const items = app.cart; const subtotal = items.reduce((s, it) => s + it.p.price * it.qty, 0); const shipping = subtotal >= 600 || subtotal === 0 ? 0 : 80; return (
e.stopPropagation()} style={{ position: 'absolute', top: 0, right: 0, height: '100%', width: '440px', maxWidth: '100vw', background: 'var(--bg-page)', display: 'flex', flexDirection: 'column', animation: 'slideIn .3s ease', boxShadow: '-12px 0 44px rgba(0,0,0,.22)', }}>

購物車 ({app.cartCount})

{items.length === 0 && (
🧺
購物車是空的
)} {items.map((it) => (
{it.p.emoji}
{it.p.name} app.removeFromCart(it.p.id)} style={{ cursor: 'pointer', color: 'var(--fg-3)', fontSize: 18 }}>
app.setQty(it.p.id, q)} /> {NT(it.p.price * it.qty)}
))}
{items.length > 0 && (
)}
); } function Row({ label, value, big }) { return (
{label} {value}
); } /* ---- 搜尋遮罩 ---- */ function SearchOverlay() { const app = useApp(); const [q, setQ] = useState(''); if (!app.searchOpen) return null; const res = q.trim() ? PRODUCTS.filter((p) => (p.name + p.blurb + p.detail).toLowerCase().includes(q.trim().toLowerCase())) : PRODUCTS.filter((p) => p.hot); return (
e.stopPropagation()} style={{ maxWidth: 640, margin: '80px auto 0', padding: '0 16px' }}>
setQ(e.target.value)} placeholder="搜尋香蕉、果醬、鮮果箱…" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 17, background: 'transparent', color: 'var(--fg-1)', fontFamily: 'var(--font-ui)' }} />
{q.trim() ? `找到 ${res.length} 項` : '熱門推薦'}
{res.map((p) => (
{ app.openProduct(p.id); app.closeSearch(); }} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '10px 12px', borderRadius: 12, cursor: 'pointer' }} onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--bg-sunk)')} onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>
{p.emoji}
{p.name}
{p.blurb}
{NT(p.price)}
))} {res.length === 0 &&
找不到「{q}」相關商品
}
); } /* ---- 通知 ---- */ function Toast() { const app = useApp(); if (!app.toast) return null; return (
{app.toast}
); }