94 lines
4.9 KiB
JavaScript
94 lines
4.9 KiB
JavaScript
'use client';
|
|
import Countdown from '@/components/elements/Countdown';
|
|
import Layout from "@/components/layout/Layout";
|
|
import { memoryData } from '@/utility/constant.utils';
|
|
import Link from "next/link";
|
|
import { useState } from 'react';
|
|
|
|
export default function Memories() {
|
|
const years = Object.keys(memoryData).sort((a, b) => Number(b) - Number(a));
|
|
const [selectedYear, setSelectedYear] = useState(years[0]); // Default to latest year
|
|
|
|
return (
|
|
<Layout headerStyle={1} footerStyle={1}>
|
|
<div>
|
|
{/* Header Section */}
|
|
<div
|
|
className="inner-page-header"
|
|
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
|
|
>
|
|
<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 sp1">
|
|
<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">
|
|
{memoryData[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>
|
|
);
|
|
}
|