137 lines
6.5 KiB
TypeScript
137 lines
6.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import React, { useState } from 'react';
|
|
import Lightbox from "yet-another-react-lightbox";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
|
|
interface GalleryImage {
|
|
src: string;
|
|
alt?: string;
|
|
delay?: number;
|
|
year: number;
|
|
}
|
|
|
|
export default function HomePhotoGallerySection() {
|
|
const galleryImages: GalleryImage[] = [
|
|
{ src: "/assets/img/home/photos-gallery/christmas.webp", delay: 800, year: 2025 },
|
|
{ src: "/assets/img/home/photos-gallery/m-g.webp", delay: 1000, year: 2025 },
|
|
{ src: "/assets/img/home/photos-gallery/thai-pongal.webp", delay: 1000, year: 2004 },
|
|
{ src: "/assets/img/home/photos-gallery/multicultural.webp", delay: 1000, year: 2023 },
|
|
{ src: "/assets/img/home/photos-gallery/sports.webp", delay: 1000, year: 2024 },
|
|
{ src: "/assets/img/home/photos-gallery/tamil-new-yr.webp", delay: 1000, year: 2022 },
|
|
|
|
{ src: "/assets/img/home/photos-gallery/kw.webp", delay: 1200, year: 1989 },
|
|
{ src: "/assets/img/home/photos-gallery/tamil-heritage.webp", delay: 800, year: 2025 },
|
|
{ src: "/assets/img/all-images/memory/memory-img9.png", delay: 1000, year: 2004 },
|
|
{ src: "/assets/img/all-images/memory/memory-img4.png", delay: 1000, year: 1989 },
|
|
{ src: "/assets/img/all-images/memory/memory-img9.png", delay: 1200, year: 2025 },
|
|
];
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [activeTab, setActiveTab] = useState<'All' | number>('All');
|
|
|
|
const years = Array.from(new Set(galleryImages.map(img => img.year))).sort((a, b) => b - a);
|
|
const tabs: (number | 'All')[] = ['All', ...years];
|
|
|
|
const filteredImages = activeTab === 'All'
|
|
? galleryImages
|
|
: galleryImages.filter(img => img.year === activeTab);
|
|
|
|
const handleImageClick = (index: number) => {
|
|
const actualIndex = galleryImages.findIndex(img => img.src === filteredImages[index].src);
|
|
setCurrentIndex(actualIndex);
|
|
setOpen(true);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="bloginner-section-area sp1">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12 m-auto">
|
|
<div className="event2-header heading5 space-margin60">
|
|
<h2 className="text-anime-style-3">Photos Gallery</h2>
|
|
|
|
{/* Tabs */}
|
|
<div className="d-flex justify-content-start gap-3 mt-4 flex-wrap">
|
|
{tabs.map((tab, i) => (
|
|
<button
|
|
key={i}
|
|
className={`btn btn-sm gallery-btn ${activeTab === tab ? 'btn-primary' : 'btn-outline-primary'}`}
|
|
onClick={() => setActiveTab(tab)}
|
|
>
|
|
{tab === 'All' ? 'All' : tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='row gx-5'>
|
|
<div className='col-lg-10'>
|
|
<div className="row mt-4">
|
|
{filteredImages.slice(0, 8).map((img, index) => (
|
|
<div
|
|
key={index}
|
|
className="col-lg-3 col-md-6"
|
|
data-aos="zoom-in"
|
|
data-aos-duration={img.delay || 1000}
|
|
>
|
|
<div className="blog4-boxarea">
|
|
<div
|
|
className="img1"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => handleImageClick(index)}
|
|
>
|
|
<img
|
|
src={img.src}
|
|
alt={img.alt || `gallery-${index}`}
|
|
loading="lazy"
|
|
style={{ width: '100%', height: 'auto' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{filteredImages.length === 0 && (
|
|
<div className="col-12 text-center mt-5">
|
|
<p className="text-muted">No images found for selected year.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className='col-lg-2'>
|
|
<div className="memory-boxarea pl-3">
|
|
|
|
<div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
|
|
<img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" className='mb-5' />
|
|
<img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt=""/>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='col-lg-12'>
|
|
<div className="space32" />
|
|
<div className="btn-area1 text-center" data-aos="fade-left" data-aos-duration={1200}>
|
|
<Link href="/event-schedule" className="vl-btn3">know More</Link>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lightbox */}
|
|
<Lightbox
|
|
open={open}
|
|
close={() => setOpen(false)}
|
|
index={currentIndex}
|
|
slides={galleryImages.map((img) => ({ src: img.src }))}
|
|
/>
|
|
</>
|
|
);
|
|
}
|