117 lines
5.5 KiB
JavaScript
117 lines
5.5 KiB
JavaScript
'use client';
|
|
import axios from 'axios';
|
|
import Layout from "@/components/layout/Layout";
|
|
import Link from "next/link";
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function Memories() {
|
|
|
|
const [selectedYear, setSelectedYear] = useState('');
|
|
const [events, setEvents]=useState([]);
|
|
const [years, setYears] = useState([]);
|
|
|
|
useEffect(() => {
|
|
getEvents();
|
|
}, [])
|
|
|
|
const getEvents = async () => {
|
|
try {
|
|
const eventRes = await axios?.get('https://api.tamilculturewaterloo.org/api/events/');
|
|
console.log("eventRes", eventRes)
|
|
setEvents(eventRes?.data?.data)
|
|
const years = Object.keys(eventRes?.data).sort((a, b) => Number(b) - Number(a));
|
|
setYears(years);
|
|
|
|
// Default to latest year
|
|
if (years.length > 0) {
|
|
setSelectedYear(years[0]);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.log("error fetching data", error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Layout headerStyle={1} footerStyle={1}>
|
|
<div>
|
|
{/* Header Section */}
|
|
<div
|
|
className="inner-page-header"
|
|
style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery-banner.webp)' }}
|
|
>
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-6 m-auto">
|
|
<div className="heading1 text-center">
|
|
<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>
|
|
|
|
{/* Memory Section */}
|
|
<div className="memory-inner-section-area blog-details-section sp4">
|
|
<div className="container">
|
|
<div className="row gx-5">
|
|
{/* Left Column: Year Tabs */}
|
|
<div className="col-lg-3 mb-4 mb-lg-0">
|
|
<div className="blog-auhtor-details sticky-top" style={{ top: "120px" }}>
|
|
<div className="blog-categories">
|
|
<ul className="list-unstyled">
|
|
{years.map((year) => (
|
|
<li key={year}>
|
|
<button
|
|
onClick={() => setSelectedYear(year)}
|
|
className={`btn w-100 mb-2 category-btn ${selectedYear === year && 'active'}`}
|
|
>
|
|
Years {year}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Gallery */}
|
|
<div className="col-lg-9">
|
|
{/* <div className="heading12 mb-4 border-bottom pb-2">
|
|
<h2 className="text-center">📷 Memories of {selectedYear}</h2>
|
|
</div> */}
|
|
|
|
<div className="row justify-content-start">
|
|
{events[selectedYear]?.map((event, idx) => (
|
|
<div className="col-lg-4 col-md-6 mb-4" key={idx}>
|
|
<div className="memory3-boxarea">
|
|
<div className="img1">
|
|
<img src={event.image} alt={event.title} />
|
|
</div>
|
|
<div className="content-area">
|
|
<p>{event.date}</p>
|
|
<div className="space12" />
|
|
<Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
|
|
<div className="plus">
|
|
<Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
|
|
<i className="fa-solid fa-plus" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|