91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
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 - GhostPizza">
|
|
<meta name="description" content="Zobacz zdjęcia naszej przepysznej pizzy. Galeria Ghost Pizza." />
|
|
<meta name="keywords" content="galeria pizzy, zdjęcia pizzy, GhostPizza galeria, pizza foto" />
|
|
<meta name="robots" content="index, follow" />
|
|
<meta name="author" content="GhostPizza" />
|
|
<link rel="canonical" href={window.location.href} />
|
|
|
|
{/* Open Graph */}
|
|
<meta property="og:title" content="Galeria - GhostPizza" />
|
|
<meta property="og:description" content="Zobacz zdjęcia naszej przepysznej pizzy. Galeria Ghost Pizza." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content={window.location.href} />
|
|
<meta property="og:site_name" content="GhostPizza" />
|
|
<meta property="og:locale" content="pl_PL" />
|
|
|
|
{/* Twitter Card */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Galeria - GhostPizza" />
|
|
<meta name="twitter:description" content="Zobacz zdjęcia naszej przepysznej pizzy. Galeria Ghost Pizza." />
|
|
</Head>
|
|
<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>
|
|
);
|
|
} |