MetatroncubeSoftwareSolutions/TamilCulturalAssociation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

About page text color changed

Browse Source
This commit is contained in:
akash 2025-08-13 00:42:42 -07:00
commit 76e8721d2a
1 changed files with 92 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
components/home/HomePhotoGallerySection.tsx
View File

@ -1,7 +1,8 @@
'use client'; 'use client';
import axios from 'axios';
import Link from 'next/link'; import Link from 'next/link';
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import Lightbox from "yet-another-react-lightbox"; import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css"; import "yet-another-react-lightbox/styles.css";
@ -13,31 +14,62 @@ interface GalleryImage {
} }
export default function HomePhotoGallerySection() { export default function HomePhotoGallerySection() {
const galleryImages: GalleryImage[] = [ const [galleryImages, setGalleryImages] = useState<GalleryImage[]>([]);
{ src: "/assets/img/home/photos-gallery/christmas.webp", delay: 800, year: 2025 }, const [years, setYears] = useState<number[]>([]);
{ src: "/assets/img/home/photos-gallery/m-g.webp", delay: 1000, year: 2025 }, const [activeYear, setActiveYear] = useState<number | null>(null);
{ 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 [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0); 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); useEffect(() => {
const tabs: (number | 'All')[] = ['All', ...years]; getEvents();
}, []);
const filteredImages = activeTab === 'All' const getEvents = async () => {
? galleryImages try {
: galleryImages.filter(img => img.year === activeTab); 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 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); setCurrentIndex(actualIndex);
setOpen(true); setOpen(true);
}; };
@ -51,30 +83,32 @@ export default function HomePhotoGallerySection() {
<div className="event2-header heading5 space-margin60"> <div className="event2-header heading5 space-margin60">
<h2 className="text-anime-style-3">Photos Gallery</h2> <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"> <div className="d-flex justify-content-start gap-3 mt-4 flex-wrap">
{tabs.map((tab, i) => ( {years.map((year) => (
<button <button
key={i} key={year}
className={`btn btn-sm gallery-btn ${activeTab === tab ? 'btn-primary' : 'btn-outline-primary'}`} className={`btn btn-sm gallery-btn ${activeYear === year ? 'btn-primary' : 'btn-outline-primary'
onClick={() => setActiveTab(tab)} }`}
onClick={() => setActiveYear(year)}
> >
{tab === 'All' ? 'All' : tab} {year}
</button> </button>
))} ))}
</div> </div>
</div> </div>
</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"> <div className="row mt-4">
{filteredImages.slice(0, 8).map((img, index) => ( {filteredImages.slice(0, 8).map((img:any, index) => (
<div <div
key={index} key={index}
className="col-lg-3 col-md-6" className="col-lg-3 col-md-6 mb-4"
data-aos="zoom-in" data-aos="zoom-in"
data-aos-duration={img.delay || 1000} data-aos-duration={ 1000}
> >
<div className="blog4-boxarea"> <div className="blog4-boxarea">
<div <div
@ -88,36 +122,51 @@ export default function HomePhotoGallerySection() {
loading="lazy" loading="lazy"
style={{ width: '100%', height: 'auto' }} style={{ width: '100%', height: 'auto' }}
/> />
<h3>{img?.eventtitle}</h3>
</div> </div>
</div> </div>
</div> </div>
))} ))}
{filteredImages.length === 0 && ( {filteredImages.length === 0 && (
<div className="col-12 text-center mt-5"> <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>
</div> </div>
<div className='col-lg-2 ad-banner'>
<div className="col-lg-2 ad-banner">
<div className="memory-boxarea pl-3"> <div className="memory-boxarea pl-3">
<div
<div className="img1" data-aos="zoom-in" data-aos-duration={1000} > className="img1"
<img src="/assets/img/home/ad-banner/photo-gallery-ad.webp" alt="" className='mb-5' /> data-aos="zoom-in"
{/* <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt=""/> */} data-aos-duration={1000}
>
<img
src="/assets/img/home/ad-banner/photo-gallery-ad.webp"
alt=""
className="mb-5"
/>
</div> </div>
</div> </div>
</div> </div>
<div className='col-lg-12'>
<div className="col-lg-12">
<div className="space32" /> <div className="space32" />
<div className="btn-area1 text-center" data-aos="fade-left" data-aos-duration={1200}> <div
<Link href="/photo-gallery" className="vl-btn3">know More</Link> 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> </div>
</div> </div>
</div> </div>