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

Api integration for events - sample

Browse Source
This commit is contained in:
vidhubk 2025-08-12 15:11:20 +05:30
parent 3b752bcc4a
commit 782616940d
4 changed files with 131 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/(event)/photo-gallery/page copy.jsx Normal file
View File

@ -0,0 +1,93 @@
'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/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">
{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>
);
}

35
app/(event)/photo-gallery/page.jsx
View File

@ -1,13 +1,36 @@
'use client';
import Countdown from '@/components/elements/Countdown';
import axios from 'axios';
import Layout from "@/components/layout/Layout";
import { memoryData } from '@/utility/constant.utils';
import Link from "next/link";
import { useState } from 'react';
import { useState, useEffect } 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
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}>
@ -63,7 +86,7 @@ export default function Memories() {
</div> */}
<div className="row justify-content-start">
{memoryData[selectedYear]?.map((event, idx) => (
{events[selectedYear]?.map((event, idx) => (
<div className="col-lg-4 col-md-6 mb-4" key={idx}>
<div className="memory3-boxarea">
<div className="img1">

16
package-lock.json generated
View File

@ -9,7 +9,7 @@
"version": "1.0.0",
"dependencies": {
"aos": "^2.3.4",
"axios": "^1.10.0",
"axios": "^1.11.0",
"gsap": "^3.12.5",
"next": "14.2.15",
"react": "^18",
@ -1722,13 +1722,13 @@
}
},
"node_modules/axios": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
"integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
"integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"form-data": "^4.0.4",
"proxy-from-env": "^1.1.0"
}
},
@ -3005,9 +3005,9 @@
}
},
"node_modules/form-data": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
"integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
"integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",

2
package.json
View File

@ -12,7 +12,7 @@
},
"dependencies": {
"aos": "^2.3.4",
"axios": "^1.10.0",
"axios": "^1.11.0",
"gsap": "^3.12.5",
"next": "14.2.15",
"react": "^18",