143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import Layout from '@/components/layout/Layout';
|
|
import axios from 'axios';
|
|
import Link from 'next/link';
|
|
import { useSearchParams, useRouter } from 'next/navigation';
|
|
import { useEffect, useState, useCallback } from 'react';
|
|
import Lightbox from "yet-another-react-lightbox";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
|
|
interface EventImage {
|
|
id: string;
|
|
src: string;
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
export default function SingleGallery() {
|
|
const searchParams = useSearchParams();
|
|
const eventId = searchParams.get('id');
|
|
const router = useRouter();
|
|
|
|
const [eventImages, setEventImages] = useState<EventImage[]>([]);
|
|
const [open, setOpen] = useState(false);
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
const getEventGallery = useCallback(async () => {
|
|
try {
|
|
const res = await axios.get(
|
|
`https://api.tamilculturewaterloo.org/api/event-images/event/${eventId}`
|
|
);
|
|
const formatted = res.data?.data?.map((img: any) => ({
|
|
id: img.id,
|
|
src: img.imageurl,
|
|
title: img?.title || '',
|
|
description: img?.description || '',
|
|
}));
|
|
setEventImages(formatted || []);
|
|
} catch (error) {
|
|
console.log("Error fetching event images", error);
|
|
}
|
|
}, [eventId]);
|
|
|
|
useEffect(() => {
|
|
if (eventId) {
|
|
getEventGallery();
|
|
}
|
|
}, [eventId, getEventGallery]);
|
|
|
|
const handleImageClick = (index: number) => {
|
|
setCurrentIndex(index);
|
|
setOpen(true);
|
|
};
|
|
|
|
return (
|
|
<Layout headerStyle={1} footerStyle={1}>
|
|
{/* Header Section */}
|
|
<div
|
|
className="inner-page-header"
|
|
style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery.webp)' }}
|
|
>
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12 m-auto">
|
|
<div className="heading1">
|
|
<h1>Recent Memories</h1>
|
|
<div className="space20" />
|
|
<Link href="/">
|
|
Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gallery Section */}
|
|
<div className="bloginner-section-area sp4">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12 m-auto">
|
|
<div className="event2-header heading5 space-margin60 d-flex justify-content-between align-items-center">
|
|
<h2 className="text-anime-style-3 mb-0">Photos Gallery</h2>
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="vl-btn3"
|
|
style={{ padding: '10px 16px' }}
|
|
>
|
|
Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row gx-5">
|
|
<div className="col-lg-12">
|
|
<div className="row mt-4">
|
|
{eventImages.map((image, index) => (
|
|
<div
|
|
key={image.id}
|
|
className="col-lg-3 col-md-6 mb-4"
|
|
data-aos="zoom-in"
|
|
data-aos-duration={1000}
|
|
>
|
|
<div className="blog4-boxarea">
|
|
<div
|
|
className="img1"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => handleImageClick(index)}
|
|
>
|
|
<img
|
|
src={image.src}
|
|
alt={image.title || `gallery-${index}`}
|
|
loading="lazy"
|
|
style={{ width: '100%', height: 'auto' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{eventImages.length === 0 && (
|
|
<div className="col-12 text-center mt-5">
|
|
<p className="text-muted">No images found for this event.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lightbox */}
|
|
<Lightbox
|
|
open={open}
|
|
close={() => setOpen(false)}
|
|
index={currentIndex}
|
|
slides={eventImages.map((img) => ({ src: img.src, title: img.title }))}
|
|
/>
|
|
</Layout>
|
|
);
|
|
}
|