import Head from 'next/head'; import ProductCard from '../../components/ProductCard'; import SiteLayout from '../../components/SiteLayout'; import { buildMediaUrl, fetchCategories, fetchProducts } from '../../lib/api'; const SAMPLE_PRODUCTS = []; function normalizeProducts(products = []) { return products.map((product) => ({ ...product, imageUrl: buildMediaUrl(product.hero_image), isSample: false, })); } export default function ProductsPage({ products, categories }) { const items = normalizeProducts(products); const groups = categories.reduce((acc, category) => { acc[category.id] = { category, items: [] }; return acc; }, {}); const uncategorized = []; items.forEach((product) => { const categoryId = product.category?.id; if (categoryId && groups[categoryId]) { groups[categoryId].items.push(product); } else { uncategorized.push(product); } }); const orderedGroups = Object.values(groups).filter((group) => group.items.length); if (uncategorized.length) { orderedGroups.push({ category: { name: 'Weekly specials' }, items: uncategorized, }); } const hasProducts = orderedGroups.length > 0; return ( Products ยท Full Moon Bakehouse

Weekly menu

Availability updates in real time. Add items to your cart and checkout when you're ready.

{hasProducts ? ( orderedGroups.map((group) => (

{group.category.name}

{group.items.map((product) => ( ))}
)) ) : (
Menu items will appear here once the API is populated.
)}
); } export async function getServerSideProps() { try { const [products, categories] = await Promise.all([fetchProducts(), fetchCategories()]); return { props: { products, categories } }; } catch (error) { console.warn('Products page data fallback', error); return { props: { products: SAMPLE_PRODUCTS, categories: [] } }; } }