Initial commit
This commit is contained in:
145
resources/js/pages/Menu/Menu.module.css
Normal file
145
resources/js/pages/Menu/Menu.module.css
Normal file
@@ -0,0 +1,145 @@
|
||||
.bg {
|
||||
padding-top: 65px;
|
||||
background: rgb(232,97,39);
|
||||
background: linear-gradient(180deg, #0077ad 0%, #242422 40%);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.bg {
|
||||
background: linear-gradient(180deg, #0077ad 0%, #242422 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
font-size: 2.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
text-align: center;
|
||||
font-size: 5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.product {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 5px 5px 12px 5px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product:nth-last-child(1) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pepper-icon {
|
||||
color: #d73c41;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #feea03;
|
||||
font-weight: 400;
|
||||
font-size: 2.6rem;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vege {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.8rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.vege > .circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: #84b341;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.circle > .leaf {
|
||||
font-size: 2.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.legend div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.legend div:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.price span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 915px) {
|
||||
.product {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.product {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.legend {
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.legend div {
|
||||
margin-right: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.legend div:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
158
resources/js/pages/Menu/Menu.tsx
Normal file
158
resources/js/pages/Menu/Menu.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user