import React, { useState } from 'react'; import FrontLayout from './Layouts/FrontLayout'; import { Head, Link } from '@inertiajs/react'; import { Camera, Play, Maximize2, ArrowRight, Image as ImageIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Gallery } from '@/types/Frontend/Gallery'; import { gallery } from '@/routes'; import { galleryShow } from '@/actions/App/Http/Controllers/FrontController'; interface GalleryProps { galleries: Gallery[] galleryTypes: { value: string; label: string }[] } const GalleryPage = ({ galleries, galleryTypes }: GalleryProps) => { const [activeTab, setActiveTab] = useState('All'); const tabs = galleryTypes; const video = galleries.filter(item => item.gallery_type === 'Video'); const photo = galleries.filter(item => item.gallery_type === 'Photo'); const filteredItems = activeTab === 'All' ? galleries : galleries.filter(item => item.gallery_type === activeTab); return (
{/* HERO SECTION */}
Visual Journey

OUR CAMPUS IN FRAME

{/* TABS */}
{/* All Button */}
{/* Enum Tabs */} {tabs.map((type) => ( ))}
{/* GALLERY GRID */}
{filteredItems.map((item) => { // ✅ Pick random image from images array const image = Array.isArray(item.images) ? item.images[Math.floor(Math.random() * item.images.length)] : item.images; const isVideo = item.gallery_type === "Video"; const videoSrc = isVideo ? item.video_url : null; const getYoutubeThumbnail = (url: string) => { const regExp = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&?#\/\s]+)/; const match = url.match(regExp); return match ? `https://img.youtube.com/vi/${match[1]}/0.jpg` : "/assets/video-placeholder.jpg"; }; return (
{/* PHOTO */} {!isVideo && image && ( {item.title} )} {/* VIDEO THUMBNAIL PLACEHOLDER FOR PERFORMANCE */} {isVideo && videoSrc && (
{item.title}
)} {/* Overlay */}
{/* Bottom Info */}

{item.title}

View More
); })}
{/* META */}

Showing {filteredItems.length} of {galleries.length}

); }; export default GalleryPage;