import { Head } from "@inertiajs/react"; import React, { useEffect, useState } from "react"; import Lightbox from "yet-another-react-lightbox"; import Captions from "yet-another-react-lightbox/plugins/captions"; import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails"; import WebLayout from "@/layouts/WebLayout"; import "yet-another-react-lightbox/styles.css"; import "yet-another-react-lightbox/plugins/thumbnails.css"; import "yet-another-react-lightbox/plugins/captions.css"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface Photo { id: number; gallery: string | null; image: string; description: string | null; } interface PhotosIndexProps { photos: Photo[]; } const Gallery = ({ photos }: PhotosIndexProps) => { const [lightboxIndex, setLightboxIndex] = useState(null); const [bgImage, setBgImage] = useState(""); const fallbackImage = "/images/logo.png"; // Use your own fallback image URL useEffect(() => { let intervalId; if (Array.isArray(photos) && photos.length > 0) { const validImages = photos .map((h) => h?.image?.trim()) .filter((img) => img); // filter out empty or undefined images if (validImages.length > 1) { // Set an initial image setBgImage(validImages[Math.floor(Math.random() * validImages.length)]); intervalId = setInterval(() => { const randomImage = validImages[Math.floor(Math.random() * validImages.length)]; setBgImage(randomImage); }, 3000); // change every 3 seconds } else { // Only one image or none available setBgImage(validImages[0] || fallbackImage); } } else { setBgImage(fallbackImage); } return () => { if (intervalId) clearInterval(intervalId); }; }, [photos]); const slides = photos.map((photo) => ({ src: photo.image, title: photo.description || "", description: photo.description || "", })); const uniqueGalleries = [ "all", ...Array.from( new Set(photos.map((photo) => photo.gallery || "Uncategorized")), ), ]; const [filter, setFilter] = useState("all"); const filteredPhotos = photos.filter((photo) => { if (filter === "all") return true; return (photo.gallery || "Uncategorized") === filter; }); return (

Our Gallery

Explore our collection of high-quality images showcasing our projects, equipment, and team.

{uniqueGalleries.map((galleryName) => ( ))}
{filteredPhotos.length > 0 ? (
{filteredPhotos.map((photo, index) => (
{photo.description setLightboxIndex(index)} />
))}
) : (

No photos found

There are no photos in this gallery at the moment.

)} {lightboxIndex !== null && photos.length > 0 && ( setLightboxIndex(null)} slides={slides} plugins={[Thumbnails, Captions]} /> )}
); }; export default Gallery;