137 lines
4.5 KiB
TypeScript
137 lines
4.5 KiB
TypeScript
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>
|
|
);
|
|
}
|