Initial commit

resources/js/components/Header/Header.tsx

@@ -0,0 +1,132 @@
+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>
+    );
+}