// ui.jsx — shared contexts + UI primitives
const LangCtx = React.createContext({ lang: 'es', t: STR.es });
const CartCtx = React.createContext(null);
const NavCtx = React.createContext(null);
const useLang = () => React.useContext(LangCtx);
const useCart = () => React.useContext(CartCtx);
const useNav = () => React.useContext(NavCtx);
// Add (+) button that turns into a qty stepper once in cart
function QtyControl({ id, size = 'md' }) {
const cart = useCart();
const q = cart.qty(id);
if (q === 0) {
return (
);
}
return (
{q}
);
}
// Full-width product row card
function ProductCard({ p }) {
const { lang } = useLang();
return (
{lang === 'en' && p.en ? p.en : p.name}
{p.tag && {p.tag}}
{p.desc}
{fmt(p.price)}
);
}
// Small card for horizontal "featured" rail
function ProductMini({ p }) {
const { lang } = useLang();
return (
{lang === 'en' && p.en ? p.en : p.name}
{fmt(p.price)}
);
}
// Ticket-style combo card
function ComboCard({ c }) {
const cart = useCart();
const { t } = useLang();
return (
{c.items.map((it, i) => (
-
{it}
))}
{fmt(c.price)}
);
}
function SectionHead({ eyebrow, title, sub, action }) {
return (
{eyebrow &&
{eyebrow}
}
{title}
{sub &&
{sub}
}
{action}
);
}
// Top app header
function Header() {
const { lang, setLang, t } = useLang();
return (
Cafetería La Z
{t.terminal}
);
}
// Open-now status strip
function OpenStrip() {
const { t } = useLang();
return (
{t.open} · {t.closes}
);
}
// Bottom tab bar
function TabBar() {
const { tab, go } = useNav();
const { t } = useLang();
const tabs = [
{ id: 'home', icon: 'coffee' },
{ id: 'menu', icon: 'sandwich' },
{ id: 'esquel', icon: 'mountain' },
{ id: 'place', icon: 'pin' },
];
return (
{tabs.map((tb, i) => (
))}
);
}
// Floating "view my order" bar
function CartBar() {
const cart = useCart();
const { go } = useNav();
const { t } = useLang();
if (cart.count === 0) return null;
return (
);
}
Object.assign(window, {
LangCtx, CartCtx, NavCtx, useLang, useCart, useNav,
QtyControl, ProductCard, ProductMini, ComboCard, SectionHead,
Header, OpenStrip, TabBar, CartBar,
});