Initial commit

2025-10-11 17:02:49 +02:00
commit 92056f073f
243 changed files with 27536 additions and 0 deletions
--- a/resources/js/pages/Gallery/Gallery.module.css
+++ b/resources/js/pages/Gallery/Gallery.module.css
@@ -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;
+    }
+}
--- a/resources/js/pages/Gallery/Gallery.tsx
+++ b/resources/js/pages/Gallery/Gallery.tsx
@@ -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>
+    );
+}