import { useEffect, useState } from 'react'; import { Head } from '@inertiajs/react'; import AppLayout from '@/layouts/AppLayout'; import { faLeaf } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ActionButtons } from '@/components/ActionButtons/ActionButtons'; import Header from '@/components/Header/Header'; import Footer from '@/components/Footer/Footer'; import styles from './Menu.module.css'; interface Ingredient { id: number; name: string; description?: string; } interface SizeInfo { description: string; photo: string | null; } interface Sizes { small: SizeInfo; medium: SizeInfo; large: SizeInfo; } interface ProductItem { name: string; description?: string; ingredients: Ingredient[]; price_small?: number; price_medium?: number; price_large?: number; spicy?: number; } interface Product { id: number; category: string; description?: string; products: Array<{ type: 'product'; data: ProductItem; }>; } interface ProductsResponse { status: string; data: Product[]; } const SizeIcon = ({ size, sizes }: { size: 'small' | 'medium' | 'large', sizes: Sizes | null }) => { const sizeClasses = { small: 'h-7 object-cover object-center', medium: 'h-7 object-cover object-center', large: 'h-7 object-cover object-center' }; const getPhotoUrl = () => { if (!sizes) return '/img/placeholder.png'; return sizes[size]?.photo || '/img/placeholder.png'; }; return ( {`${size}

) }; export default function Menu() { const [products, setProducts] = useState([]); const [sizes, setSizes] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { Promise.all([ fetch('/api/products').then(res => res.json()), fetch('/api/sizes').then(res => res.json()) ]) .then(([productsResponse, sizesResponse]) => { setProducts(productsResponse.data); setSizes(sizesResponse.data); setLoading(false); }) .catch(error => { console.error('Error fetching data:', error); setLoading(false); }); }, []); if (loading) { return ( <> ); } const PepperIcon = function PepperIcon() {return (

)} function getPepperIcons(length: number) { const arr = []; for(let pepper=0; pepper < length; pepper++) { arr.push() } return arr; } return (

Pizza:

VEGE? Zapytaj obsługę

{sizes && ( <> {(['small', 'medium', 'large'] as const).map((size) => (

{sizes[size].description}

))} )}

{products ? products.map((category, categoryIndex) => (

{categoryIndex != 0 ?

{category.category}

: null}

{category.products.map((item, index) => (

{categoryIndex === 0 ? `${index + 1}. ` : ''}{item.data.name} {item.data.spicy ? getPepperIcons(item.data.spicy) : null}

{item.data.ingredients.map(i => i.name).join(', ')}

{item.data.price_small && item.data.price_medium && item.data.price_large ?

{item.data.price_small}zł {item.data.price_medium}zł{item.data.price_large}zł

: item.data.price_small ?

{item.data.price_small}zł

: null}

))}

)) : null}

); }