// menu.jsx β three menu layout variations + filters
const { useState: useStateM, useMemo, useEffect: useEffectM } = React;
function FilterBar({ q, setQ, catFilter, setCatFilter, statusFilter, setStatusFilter, unlocked }) {
return (
);
}
// ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
// Layout A β Sidebar + main list table
function SidebarLayout({ products, catFilter, setCatFilter, unlocked, onOpen }) {
const counts = useMemo(() => {
const c = {};
PRODUCTS.forEach(p => { c[p.cat] = (c[p.cat] || 0) + 1; });
return c;
}, []);
return (
);
}
function ProductTable({ products, unlocked, onOpen }) {
if (!products.length) {
return No products match. Loosen the filters.
;
}
const grouped = useMemo(() => {
const g = {};
products.forEach(p => { (g[p.cat] ||= []).push(p); });
return CATEGORIES.filter(c => g[c.id]).map(c => [c, g[c.id]]);
}, [products]);
return (
{grouped.map(([cat, items]) => (
{cat.icon}
{cat.name}
{items.length} SKU{items.length === 1 ? '' : 's'}
| Product | Format |
THC | Total | Terps |
Status | Price | MOQ |
COA |
{items.map(p => )}
))}
onOpen(p)}>
|
{p.name}
{p.notes}
|
{p.format} |
{p.thc === 'TBD' ? 'β' : `${p.thc}%`} |
{p.total === 'TBD' ? 'β' : `${p.total}%`} |
{p.terps === 'TBD' ? 'β' : `${p.terps}%`} |
{sm.label}
{p.flag === 'restocked' && (
β restocked
)}
|
{unlocked ? {p.price} : β} |
{unlocked ? p.moq : β} |
{ e.stopPropagation(); alert('COA opens on the detail page'); }}>COA |
);
}
// ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
// Layout B β Hybrid card grid that expands inline
function HybridLayout({ products, catFilter, setCatFilter, unlocked, onOpen }) {
return (
{CATEGORIES.map(c => (
))}
{products.map(p =>
)}
{!products.length && No products match.
}
);
}
function ProductCard({ p, unlocked, onOpen }) {
const cat = CATEGORIES.find(c => c.id === p.cat);
const sm = STATUS_META[p.status] || STATUS_META.available;
return (
onOpen(p)} style={{'--cat-accent':cat?.accent}}>
{p.name.split(' ').slice(0,2).map(w => w[0]).join('')}
{cat?.icon} {cat?.name}
{p.strain}
{sm.label}
{p.name}
{p.notes}
THC{p.thc === 'TBD' ? 'β' : `${p.thc}%`}
Total{p.total === 'TBD' ? 'β' : `${p.total}%`}
Terps{p.terps === 'TBD' ? 'β' : `${p.terps}%`}
CBD{p.cbd === 'TBD' ? 'β' : `${p.cbd}%`}
{unlocked ? p.price : 'token req.'}
{p.format}
);
}
// ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
// Layout C β Magazine spread (editorial, features hero product)
function MagazineLayout({ products, catFilter, setCatFilter, unlocked, onOpen }) {
// Feature first available product, then split rest by category
const hero = products.find(p => p.status === 'available') || products[0];
const rest = products.filter(p => p.id !== hero?.id);
return (
{CATEGORIES.map(c => (
))}
{hero && (
onOpen(hero)}>
FEATURE
{hero?.strain}
{hero.name}
{hero.description}
THC{hero.thc}%
Total cannabinoids{hero.total}%
Terps{hero.terps}%
Format{hero.format}
Price{unlocked ? hero.price : 'β'}
{hero.name.split(' ').slice(0,2).map(w => w[0]).join('')}
)}
{rest.map(p => (
))}
);
}
Object.assign(window, { FilterBar, SidebarLayout, HybridLayout, MagazineLayout, ProductRow, ProductCard });