home page photo gallery section updated
This commit is contained in:
Alaguraj0361
parent
317c611339
commit
8402fbbc94
@ -1,7 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import axios from 'axios';
|
||||
import Link from 'next/link';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Lightbox from "yet-another-react-lightbox";
|
||||
import "yet-another-react-lightbox/styles.css";
|
||||
|
||||
@ -13,31 +14,62 @@ interface GalleryImage {
|
||||
}
|
||||
|
||||
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 },
|
||||
];
|
||||
|
||||
const [galleryImages, setGalleryImages] = useState<GalleryImage[]>([]);
|
||||
const [years, setYears] = useState<number[]>([]);
|
||||
const [activeYear, setActiveYear] = useState<number | null>(null);
|
||||
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];
|
||||
useEffect(() => {
|
||||
getEvents();
|
||||
}, []);
|
||||
|
||||
const filteredImages = activeTab === 'All'
|
||||
? galleryImages
|
||||
: galleryImages.filter(img => img.year === activeTab);
|
||||
const getEvents = async () => {
|
||||
try {
|
||||
const eventRes = await axios.get(
|
||||
'https://api.tamilculturewaterloo.org/api/events/'
|
||||
);
|
||||
|
||||
const eventsData = eventRes?.data?.data || [];
|
||||
|
||||
// Extract images with year (flattened array)
|
||||
const formatted = eventsData.map((img: any) => ({
|
||||
id: img.id,
|
||||
src: img.eventimageurl,
|
||||
title: img?.eventtitle || '',
|
||||
description: img?.eventdescription || '',
|
||||
year: img?.year
|
||||
}));
|
||||
|
||||
setGalleryImages(formatted);
|
||||
|
||||
// Unique years, sorted latest first
|
||||
const uniqueYears:any = [...new Set(eventsData.map((event: any) => event.year))]
|
||||
|
||||
setYears(uniqueYears);
|
||||
|
||||
// Set latest year as default tab
|
||||
if (uniqueYears.length > 0) {
|
||||
setActiveYear(uniqueYears[0]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error fetching event images:", error);
|
||||
}
|
||||
};
|
||||
|
||||
console.log("activeYear", activeYear)
|
||||
console.log("galleryImages", galleryImages)
|
||||
|
||||
// Filter images by active year
|
||||
const filteredImages = galleryImages.filter((img) => img.year === activeYear)
|
||||
|
||||
|
||||
console.log("filteredImages", filteredImages)
|
||||
|
||||
const handleImageClick = (index: number) => {
|
||||
const actualIndex = galleryImages.findIndex(img => img.src === filteredImages[index].src);
|
||||
const actualIndex = galleryImages.findIndex(
|
||||
(img) => img.src === filteredImages[index].src
|
||||
);
|
||||
setCurrentIndex(actualIndex);
|
||||
setOpen(true);
|
||||
};
|
||||
@ -51,30 +83,32 @@ export default function HomePhotoGallerySection() {
|
||||
<div className="event2-header heading5 space-margin60">
|
||||
<h2 className="text-anime-style-3">Photos Gallery</h2>
|
||||
|
||||
{/* Tabs */}
|
||||
{/* Year Tabs */}
|
||||
<div className="d-flex justify-content-start gap-3 mt-4 flex-wrap">
|
||||
{tabs.map((tab, i) => (
|
||||
{years.map((year) => (
|
||||
<button
|
||||
key={i}
|
||||
className={`btn btn-sm gallery-btn ${activeTab === tab ? 'btn-primary' : 'btn-outline-primary'}`}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
key={year}
|
||||
className={`btn btn-sm gallery-btn ${activeYear === year ? 'btn-primary' : 'btn-outline-primary'
|
||||
}`}
|
||||
onClick={() => setActiveYear(year)}
|
||||
>
|
||||
{tab === 'All' ? 'All' : tab}
|
||||
{year}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='row gx-5'>
|
||||
<div className='col-lg-10'>
|
||||
|
||||
<div className="row gx-5">
|
||||
<div className="col-lg-10">
|
||||
<div className="row mt-4">
|
||||
{filteredImages.slice(0, 8).map((img, index) => (
|
||||
{filteredImages.slice(0, 8).map((img:any, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="col-lg-3 col-md-6"
|
||||
className="col-lg-3 col-md-6 mb-4"
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration={img.delay || 1000}
|
||||
data-aos-duration={ 1000}
|
||||
>
|
||||
<div className="blog4-boxarea">
|
||||
<div
|
||||
@ -88,36 +122,51 @@ export default function HomePhotoGallerySection() {
|
||||
loading="lazy"
|
||||
style={{ width: '100%', height: 'auto' }}
|
||||
/>
|
||||
<h3>{img?.eventtitle}</h3>
|
||||
</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>
|
||||
<p className="text-muted">
|
||||
No images found for {activeYear}.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-lg-2 ad-banner'>
|
||||
|
||||
<div className="col-lg-2 ad-banner">
|
||||
<div className="memory-boxarea pl-3">
|
||||
|
||||
<div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
|
||||
<img src="/assets/img/home/ad-banner/photo-gallery-ad.webp" alt="" className='mb-5' />
|
||||
{/* <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt=""/> */}
|
||||
|
||||
<div
|
||||
className="img1"
|
||||
data-aos="zoom-in"
|
||||
data-aos-duration={1000}
|
||||
>
|
||||
<img
|
||||
src="/assets/img/home/ad-banner/photo-gallery-ad.webp"
|
||||
alt=""
|
||||
className="mb-5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-lg-12'>
|
||||
|
||||
<div className="col-lg-12">
|
||||
<div className="space32" />
|
||||
<div className="btn-area1 text-center" data-aos="fade-left" data-aos-duration={1200}>
|
||||
<Link href="/photo-gallery" className="vl-btn3">know More</Link>
|
||||
<div
|
||||
className="btn-area1 text-center"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration={1200}
|
||||
>
|
||||
<Link href="/photo-gallery" className="vl-btn3">
|
||||
Know More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user