158 lines
5.4 KiB
TypeScript
158 lines
5.4 KiB
TypeScript
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 (
|
|
<img
|
|
src={getPhotoUrl()}
|
|
className={sizeClasses[size]}
|
|
alt={`${size} size`}
|
|
/>
|
|
)
|
|
};
|
|
|
|
export default function Menu() {
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [sizes, setSizes] = useState<Sizes | null>(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 (
|
|
<img src="/storage/static_images/pepper.png" alt="" width="37px" height="29px" />
|
|
)}
|
|
|
|
function getPepperIcons(length: number) {
|
|
const arr = [];
|
|
for(let pepper=0; pepper < length; pepper++) {
|
|
arr.push(<PepperIcon key={pepper} />)
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Menu - Ghost Pizza" />
|
|
<div className={styles.bg}>
|
|
|
|
|
|
<Header isSmall={true} />
|
|
<main className={styles.main}>
|
|
<h2>Pizza:</h2>
|
|
<div className={styles.vege}><div className={styles.circle}><FontAwesomeIcon icon={faLeaf} className={styles.leaf} /></div>VEGE? Zapytaj obsługę</div>
|
|
<div className={styles.legend}>
|
|
{sizes && (
|
|
<>
|
|
{(['small', 'medium', 'large'] as const).map((size) => (
|
|
<div key={size} className="flex items-center gap-2">
|
|
<SizeIcon size={size} sizes={sizes} />
|
|
{sizes[size].description}
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{products ? products.map((category, categoryIndex) => (
|
|
<div key={categoryIndex}>
|
|
{categoryIndex != 0 ? <h2>{category.category}</h2> : null}
|
|
<div className={styles.container}>
|
|
{category.products.map((item, index) => (
|
|
<div key={index} className={styles.product}>
|
|
<div className={styles.name}>{categoryIndex === 0 ? `${index + 1}. ` : ''}{item.data.name} {item.data.spicy ? getPepperIcons(item.data.spicy) : null}</div>
|
|
<div>{item.data.ingredients.map(i => i.name).join(', ')}</div>
|
|
{item.data.price_small && item.data.price_medium && item.data.price_large ?
|
|
<div className={styles.price}><span><SizeIcon size="small" sizes={sizes} />{item.data.price_small}zł</span> <span><SizeIcon size="medium" sizes={sizes} />{item.data.price_medium}zł</span><span><SizeIcon size="large" sizes={sizes} />{item.data.price_large}zł</span></div>
|
|
: item.data.price_small ? <div className={styles.price}><span>{item.data.price_small}zł</span></div> : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)) : null}
|
|
</main>
|
|
<ActionButtons variant="floating" />
|
|
<Footer />
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |