Initial commit
This commit is contained in:
62
resources/js/pages/Gallery/Gallery.module.css
Normal file
62
resources/js/pages/Gallery/Gallery.module.css
Normal file
@@ -0,0 +1,62 @@
|
||||
.bg {
|
||||
padding-top: 65px;
|
||||
background: rgb(232,97,39);
|
||||
background: linear-gradient(180deg, #0077ad 0%, #242422 40%);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 4.5rem;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 50px auto;
|
||||
padding: 0 30px;
|
||||
line-height: 0;
|
||||
column-count: 3;
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 915px) {
|
||||
.container {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.bg {
|
||||
background: linear-gradient(180deg, #0077ad 0%, #242422 50%);
|
||||
}
|
||||
|
||||
.container {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
72
resources/js/pages/Gallery/Gallery.tsx
Normal file
72
resources/js/pages/Gallery/Gallery.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Head } from '@inertiajs/react';
|
||||
import AppLayout from '@/layouts/AppLayout';
|
||||
import styles from './Gallery.module.css';
|
||||
import { ActionButtons } from '@/components/ActionButtons/ActionButtons';
|
||||
import Header from '@/components/Header/Header';
|
||||
import Footer from '@/components/Footer/Footer';
|
||||
|
||||
interface Photo {
|
||||
id: number;
|
||||
sort_order: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
photo: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface PhotosResponse {
|
||||
status: string;
|
||||
data: Photo[];
|
||||
}
|
||||
|
||||
export default function Gallery() {
|
||||
const [photos, setPhotos] = useState<Photo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/photos')
|
||||
.then(res => res.json())
|
||||
.then((response: PhotosResponse) => {
|
||||
if (response.status === 'success') {
|
||||
setPhotos(response.data);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching photos:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<Head title="Galeria - Ghost Pizza" />
|
||||
<div className={styles.bg}>
|
||||
<Header isSmall={true} />
|
||||
<main className={styles.main}>
|
||||
<h2>Poniżej znajdziesz kilka zdjęć naszej przepysznej pizzy.</h2>
|
||||
<div className={styles.container}>
|
||||
{photos.map((photo, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={photo.photo}
|
||||
alt={photo.description ? photo.description : ""}
|
||||
className={styles.image}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
<ActionButtons variant="floating" />
|
||||
<Footer />
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
146
resources/js/pages/Home.module.css
Normal file
146
resources/js/pages/Home.module.css
Normal file
@@ -0,0 +1,146 @@
|
||||
.container {
|
||||
padding-top: 65px;
|
||||
background: #242422;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.container h1 {
|
||||
font-weight: 400;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.container h1 span {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 0 10px;
|
||||
max-width: 1200px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.mapouter {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
height: 300px;
|
||||
width: 500px;
|
||||
margin: 20px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.gmap_canvas {
|
||||
overflow: hidden;
|
||||
background: none !important;
|
||||
height: 300px;
|
||||
width: 500px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-weight: 400;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.big > h1, .big > h2, .big > h3, .big > h4, .big > h5, .big > h6 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hours {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.hours > div {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
.special {
|
||||
font-size: 1.9rem;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px dashed rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.special strong {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-size: 2.1rem;
|
||||
color: #edb265;
|
||||
}
|
||||
|
||||
.promo {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.promo strong {
|
||||
color: #edb265;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width: 930px) {
|
||||
.main {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-top: 50px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 660px) {
|
||||
.mapouter,
|
||||
.gmap_canvas {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
.container h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: 10px auto 50px auto;
|
||||
}
|
||||
}
|
||||
136
resources/js/pages/Home.tsx
Normal file
136
resources/js/pages/Home.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import Header from '../components/Header/Header';
|
||||
import Footer from '../components/Footer/Footer';
|
||||
import { Head } from '@inertiajs/react';
|
||||
import styles from './Home.module.css';
|
||||
import AppLayout from '@/layouts/AppLayout';
|
||||
import { ActionButtons } from '../components/ActionButtons/ActionButtons';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface OpeningHour {
|
||||
type: 'opening_hour';
|
||||
data: {
|
||||
name: string;
|
||||
time: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface Promotion {
|
||||
id: number;
|
||||
sort_order: number;
|
||||
title: string;
|
||||
description: string;
|
||||
additional_info: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface HomepageData {
|
||||
status: string;
|
||||
data: {
|
||||
photo: string | null;
|
||||
photo_mobile: string | null;
|
||||
title: string | null;
|
||||
body: string | null;
|
||||
delivery: string | null;
|
||||
address: string | null;
|
||||
opening_hours: OpeningHour[];
|
||||
widget_link: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [data, setData] = useState<HomepageData['data'] | null>(null);
|
||||
const [promotions, setPromotions] = useState<Promotion[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetch('/api/homepage').then(res => res.json()),
|
||||
fetch('/api/promotions').then(res => res.json())
|
||||
])
|
||||
.then(([homepageResponse, promotionsResponse]) => {
|
||||
setData(homepageResponse.data);
|
||||
setPromotions(promotionsResponse.data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<Head title={data?.title || 'Ghost Pizza'}/>
|
||||
|
||||
<div className={styles.container}>
|
||||
<Header />
|
||||
<main className={styles.main}>
|
||||
<div className={styles.left}>
|
||||
{data?.body && (
|
||||
<div className={classNames(styles.text)}>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: data.body }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={classNames(styles.text, styles.promo)}>
|
||||
{promotions.map((promotion) => (
|
||||
<div key={promotion.id}>
|
||||
<strong>{promotion.title}</strong> {promotion.description} {promotion.additional_info}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{data?.delivery && (
|
||||
<div className={classNames(styles.text, styles.special)}>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: data.delivery }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ActionButtons variant="default" />
|
||||
</div>
|
||||
<div className={styles.right}>
|
||||
{data?.address && (
|
||||
<div className={classNames(styles.big)} dangerouslySetInnerHTML={{ __html: data.address }} />
|
||||
)}
|
||||
|
||||
<div className={styles.big}>Godziny otwarcia:</div>
|
||||
<div className={styles.hours}>
|
||||
{data?.opening_hours.map((hour, index) => (
|
||||
<div key={index}><div>{hour.data.name}</div> <div className={styles.bold}>{hour.data.time}</div></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.mapouter}>
|
||||
<div className={styles['gmap_canvas']}>
|
||||
{data?.widget_link ? (
|
||||
<iframe
|
||||
title="Mapa"
|
||||
src={data.widget_link}
|
||||
width="600"
|
||||
height="500"
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
id="gmap_canvas"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
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