132 lines
4.0 KiB
TypeScript
132 lines
4.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Link } from '@inertiajs/react';
|
|
import styles from './Header.module.css';
|
|
|
|
interface HeaderData {
|
|
status: string;
|
|
data: {
|
|
photo: string | null;
|
|
photo_mobile: string | null;
|
|
photo_menu: string | null;
|
|
title: string | null;
|
|
};
|
|
}
|
|
|
|
interface NavigationLink {
|
|
id: number;
|
|
sort_order: number;
|
|
name: string;
|
|
link: string;
|
|
external: number;
|
|
created_at: string;
|
|
updated_at: string;
|
|
}
|
|
|
|
export default function Header({isSmall=false}) {
|
|
const [innerWidth, setInnerWidth] = useState(0);
|
|
const [links, setLinks] = React.useState<NavigationLink[]>([]);
|
|
const [data, setData] = useState<HeaderData['data'] | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
Promise.all([
|
|
fetch('/api/homepage').then(res => res.json()),
|
|
fetch('/api/navigation').then(res => res.json())
|
|
])
|
|
.then(([headerResponse, navigationResponse]) => {
|
|
setData(headerResponse.data);
|
|
setLinks(navigationResponse.data);
|
|
setLoading(false);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
setLoading(false);
|
|
});
|
|
|
|
|
|
setInnerWidth(prevState => prevState = window.innerWidth);
|
|
|
|
function handleResize() {
|
|
setInnerWidth(prevState => prevState = window.innerWidth);
|
|
}
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
}
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<></>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<nav>
|
|
<ul>
|
|
{links.map((link) => {
|
|
return link.external ? (
|
|
<li key={link.id}>
|
|
<a
|
|
href={link.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
) : (
|
|
<li key={link.id}>
|
|
<Link
|
|
href={link.link}
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
<div className="image-column">
|
|
{isSmall ? (
|
|
<>
|
|
{data && data.photo && data.photo_menu ? (
|
|
<div className="image-container">
|
|
<img className={styles['logo-small']} fetchPriority="high" src={data.photo_menu} alt="Logo pizzeri GhostPizza" />
|
|
</div>
|
|
) : null}
|
|
</>
|
|
) : (
|
|
(data && data.photo && data.photo_mobile) ? (
|
|
<div className="image-container">
|
|
{innerWidth > 1450 ? (
|
|
<div className={styles['img-container']}>
|
|
<img
|
|
style={{ objectFit: "contain" }}
|
|
className={styles.logo}
|
|
src={data.photo}
|
|
alt={data.title || 'Ghost Pizza'}
|
|
fetchPriority="high"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className={styles['img-container']}>
|
|
<img
|
|
style={{ objectFit: "contain" }}
|
|
className={styles.logo}
|
|
src={data.photo_mobile}
|
|
alt={data.title || 'Ghost Pizza'}
|
|
fetchPriority="high"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : null
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
} |