88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ChevronLeft, ChevronRight, X } from "lucide-react";
|
|
|
|
const GallerySection = () => {
|
|
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
|
|
|
const images = [
|
|
"https://images.unsplash.com/photo-1553005746-5be7d6d48a81?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
|
|
"https://images.unsplash.com/photo-1588286840104-8957b019727f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
|
|
"https://images.unsplash.com/photo-1599586120429-48281b6f0ece?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
|
|
"https://images.unsplash.com/photo-1592656094267-764a45160876?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
|
|
"https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
|
|
"https://images.unsplash.com/photo-1544213456-e1c259fecc4f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
|
|
];
|
|
|
|
const openLightbox = (image: string) => {
|
|
setSelectedImage(image);
|
|
document.body.style.overflow = "hidden";
|
|
};
|
|
|
|
const closeLightbox = () => {
|
|
setSelectedImage(null);
|
|
document.body.style.overflow = "auto";
|
|
};
|
|
|
|
return (
|
|
<section id="gallery" className="py-16 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-gray-900">Galerie</h2>
|
|
<p className="mt-4 text-xl text-gray-600">Eindrücke aus unserem Vereinsleben</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
{images.map((image, index) => (
|
|
<div
|
|
key={index}
|
|
className="aspect-square overflow-hidden rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
|
|
onClick={() => openLightbox(image)}
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={`Galeriebild ${index + 1}`}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="text-center mt-12">
|
|
<Button className="bg-frog-500 hover:bg-frog-600">
|
|
Mehr Bilder anzeigen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lightbox */}
|
|
{selectedImage && (
|
|
<div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center" onClick={closeLightbox}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute top-4 right-4 text-white hover:bg-white/10"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
closeLightbox();
|
|
}}
|
|
>
|
|
<X className="h-8 w-8" />
|
|
</Button>
|
|
|
|
<div className="relative max-w-4xl max-h-[80vh]" onClick={(e) => e.stopPropagation()}>
|
|
<img
|
|
src={selectedImage}
|
|
alt="Vergrößertes Bild"
|
|
className="max-w-full max-h-[80vh] object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default GallerySection;
|