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

upcoming events dynamaic

Browse Source
This commit is contained in:
srikanth_M 2026-08-06 09:56:58 +05:30
parent d214b2733d
commit 2a7aa7d2ff
11 changed files with 508 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/(event)/upcoming-event/[slug]/page.jsx
View File

@ -1,31 +1,60 @@
import UpcomingEventSinglePage from "@/components/events/UpcomingEventSinglePage"; import UpcomingEventSinglePage from "@/components/events/UpcomingEventSinglePage";
import { events } from "@/utility/constant.utils";
const getEvent = (slug) => events.find((event) => event.slug === slug); export const dynamic = 'force-dynamic';
export const revalidate = 0;
export function generateStaticParams() { export async function generateStaticParams() {
return events try {
.filter((event) => event.slug) const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
.map((event) => ({ const res = await fetch(`${API_BASE_URL}/upcoming-events`);
slug: event.slug, const data = await res.json();
})); if (data && data.success && data.data && data.data.length > 0) {
const paramsList = [];
data.data.forEach(event => {
if (event.slug && String(event.slug).trim()) {
paramsList.push({ slug: String(event.slug).trim() });
}
if (event.id) {
paramsList.push({ slug: String(event.id) });
}
const title = event.title || event.eventtitle || '';
if (title) {
const titleSlug = String(title).toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
if (titleSlug) {
paramsList.push({ slug: titleSlug });
}
}
});
return paramsList.length > 0 ? paramsList : [{ slug: 'default' }];
}
} catch (e) {
console.error("Error in generateStaticParams:", e);
}
return [{ slug: 'default' }];
} }
export async function generateMetadata({ params }) { export async function generateMetadata({ params }) {
const event = getEvent(params.slug); try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
if (!event) { const res = await fetch(`${API_BASE_URL}/upcoming-events/slug/${params.slug}`);
return { const data = await res.json();
title: "Upcoming Event | Tamil Culture Waterloo", if (data && data.success && data.data) {
}; const event = data.data;
return {
title: `${event.title || event.eventtitle} | Tamil Culture Waterloo`,
description: event.description || event.eventdescription || `Details for ${event.title || event.eventtitle}.`,
};
}
} catch (e) {
console.error("Error in generateMetadata:", e);
} }
return { return {
title: `${event.title} | Tamil Culture Waterloo`, title: "Upcoming Event | Tamil Culture Waterloo",
description: event.desc || `Details for ${event.title}.`,
}; };
} }
export default function Page({ params }) { export default function Page({ params }) {
return <UpcomingEventSinglePage slug={params.slug} />; return <UpcomingEventSinglePage slug={params.slug} />;
} }

248
components/events/UpcomingEventData.jsx
View File

@ -1,11 +1,37 @@
'use client' 'use client'
import Link from 'next/link' import Link from 'next/link'
import moment from "moment"; import moment from "moment";
import { useState } from "react" import { useState, useEffect } from "react"
import { events } from "@/utility/constant.utils"; // <-- import the events array here import axios from "axios";
export default function UpcomingEventData() { export default function UpcomingEventData() {
const [currentMonth, setCurrentMonth] = useState(moment()); const [currentMonth, setCurrentMonth] = useState(moment());
const [events, setEvents] = useState([]);
useEffect(() => {
const fetchEvents = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
if (response.data && response.data.success) {
const normalizedEvents = response.data.data.map(e => ({
...e,
title: e.title || e.eventtitle,
date: e.date || e.eventdate,
image: e.image || e.eventimageurl,
desc: e.description || e.eventdescription,
btnText: e.btn_text || e.btnText,
link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`),
location: e.location || e.venue,
}));
setEvents(normalizedEvents);
}
} catch (error) {
console.error("Error fetching upcoming events:", error);
}
};
fetchEvents();
}, []);
// Get start and end of current month // Get start and end of current month
const startOfMonth = currentMonth.clone().startOf("month"); const startOfMonth = currentMonth.clone().startOf("month");
@ -135,125 +161,125 @@ export default function UpcomingEventData() {
return ( return (
<div key={event.id} className="mb-5"> <div key={event.id} className="mb-5">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-lg-1" /> <div className="col-lg-12">
<div className="col-lg-10 m-auto"> <div className="event2-boxarea box1">
<div className="event2-boxarea box1 d-flex flex-wrap align-items-center"> <h1 className="active">{String(idx + 1).padStart(2, "0")}</h1>
<h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1> <div className="row align-items-center">
{!isEven ? (
{!isEven ? ( <>
<> <div className="col-lg-5">
<div className="col-lg-5"> <div className="img1">
<div className="img1"> <img src={event.image} alt={event.title} />
<img src={event.image} alt={event.title} />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<span className='d-flex g-3 metered-data'>
<img src={event.time ? "/assets/img/icons/clock1.svg" : "/assets/img/icons/calender1.svg"} alt={event.time ? "clock" : "calendar"} />{" "}
{event.time ? `${event.time} - ` : ""}
{formatEventDate(event.date)}
</span>
</li>
{event.location && event.location.trim() && (
<li>
<span className='d-flex g-3 metered-data'>
<img src="/assets/img/icons/location1.svg" alt="" />{" "}
{event.location}
</span>
</li>
)}
</ul>
<div className="space20" />
<Link href={event.link || "#"} className="head">{event.title}</Link>
<div className="space24" />
<p
style={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{event.desc}
</p>
<div className="space24" />
<div className="btn-area1">
<Link
href={buttonHref}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
>
<span className="demo">{event.btnText || "Online Tickets"}</span>
</Link>
</div> </div>
</div> </div>
</div>
</> <div className="col-lg-2" />
) : (
<> <div className="col-lg-5">
<div className="col-lg-6"> <div className="content-area">
<div className="content-area"> <ul>
<ul>
<li>
<span className='d-flex g-3 metered-data'>
<img src={event.time ? "/assets/img/icons/clock1.svg" : "/assets/img/icons/calender1.svg"} alt={event.time ? "clock" : "calendar"} />{" "}
{event.time ? `${event.time} - ` : ""}
{formatEventDate(event.date)}
</span>
</li>
{event.location && event.location.trim() && (
<li> <li>
<span className='d-flex g-3 metered-data'> <span className='d-flex g-3 metered-data'>
<img src="/assets/img/icons/location1.svg" alt="" />{" "} <img src={event.time ? "/assets/img/icons/clock1.svg" : "/assets/img/icons/calender1.svg"} alt={event.time ? "clock" : "calendar"} />{" "}
{event.location} {event.time ? `${event.time} - ` : ""}
{formatEventDate(event.date)}
</span> </span>
</li> </li>
)} {event.location && event.location.trim() && (
</ul> <li>
<div className="space20" /> <span className='d-flex g-3 metered-data'>
<Link href={event.link || "#"} className="head">{event.title}</Link> <img src="/assets/img/icons/location1.svg" alt="" />{" "}
<div className="space24" /> {event.location}
<p </span>
style={{ </li>
display: '-webkit-box', )}
WebkitLineClamp: 2, </ul>
WebkitBoxOrient: 'vertical', <div className="space20" />
overflow: 'hidden', <Link href={event.link || "#"} className="head">{event.title}</Link>
textOverflow: 'ellipsis', <div className="space24" />
}} <p
> style={{
{event.desc} display: '-webkit-box',
</p> WebkitLineClamp: 2,
<div className="space24" /> WebkitBoxOrient: 'vertical',
<div className="btn-area1"> overflow: 'hidden',
<Link textOverflow: 'ellipsis',
href={buttonHref} }}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
> >
<span className="demo">{event.btnText || "Online Tickets"}</span> {event.desc}
</Link> </p>
<div className="space24" />
<div className="btn-area1">
<Link
href={buttonHref}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
>
<span className="demo">{event.btnText || "Online Tickets"}</span>
</Link>
</div>
</div> </div>
</div> </div>
</div> </>
) : (
<div className="col-lg-1" /> <>
<div className="col-lg-5">
<div className="col-lg-5"> <div className="content-area">
<div className="img1"> <ul>
<img src={event.image} alt={event.title} /> <li>
<span className='d-flex g-3 metered-data'>
<img src={event.time ? "/assets/img/icons/clock1.svg" : "/assets/img/icons/calender1.svg"} alt={event.time ? "clock" : "calendar"} />{" "}
{event.time ? `${event.time} - ` : ""}
{formatEventDate(event.date)}
</span>
</li>
{event.location && event.location.trim() && (
<li>
<span className='d-flex g-3 metered-data'>
<img src="/assets/img/icons/location1.svg" alt="" />{" "}
{event.location}
</span>
</li>
)}
</ul>
<div className="space20" />
<Link href={event.link || "#"} className="head">{event.title}</Link>
<div className="space24" />
<p
style={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{event.desc}
</p>
<div className="space24" />
<div className="btn-area1">
<Link
href={buttonHref}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
>
<span className="demo">{event.btnText || "Online Tickets"}</span>
</Link>
</div>
</div>
</div> </div>
</div>
</> <div className="col-lg-2" />
)}
<div className="col-lg-5">
<div className="img1">
<img src={event.image} alt={event.title} />
</div>
</div>
</>
)}
</div>
</div> </div>
</div> </div>
</div> </div>

78
components/events/UpcomingEventSinglePage.jsx
View File

@ -1,7 +1,9 @@
'use client'
import Layout from "@/components/layout/Layout"; import Layout from "@/components/layout/Layout";
import Link from "next/link"; import Link from "next/link";
import moment from "moment"; import moment from "moment";
import { events } from "@/utility/constant.utils"; import { useState, useEffect } from "react";
import axios from "axios";
const formatEventDate = (dateStr) => { const formatEventDate = (dateStr) => {
if (!dateStr) return "Details will be announced"; if (!dateStr) return "Details will be announced";
@ -12,11 +14,79 @@ const formatEventDate = (dateStr) => {
}); });
}; };
export default function UpcomingEventSinglePage({ slug }) { import { useSearchParams } from "next/navigation";
const event = events.find((item) => item.slug === slug);
export default function UpcomingEventSinglePage({ slug: propSlug }) {
const searchParams = useSearchParams();
const [event, setEvent] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
let activeSlug = propSlug;
if (!activeSlug && searchParams) {
activeSlug = searchParams.get('slug') || searchParams.get('id');
}
if (!activeSlug && typeof window !== 'undefined') {
const parts = window.location.pathname.split('/').filter(Boolean);
if (parts.length > 0) {
activeSlug = parts[parts.length - 1];
}
}
const fetchEvent = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
const response = await axios.get(`${API_BASE_URL}/upcoming-events/slug/${activeSlug}`);
if (response.data && response.data.success) {
const e = response.data.data;
setEvent({
...e,
title: e.title || e.eventtitle,
date: e.date || e.eventdate,
image: e.image || e.eventimageurl,
desc: e.description || e.eventdescription,
btnText: e.btn_text || e.btnText,
link: e.link || `/upcoming-event/${e.slug}`,
location: e.location || e.venue,
});
}
} catch (error) {
console.error("Error fetching event details:", error);
} finally {
setLoading(false);
}
};
if (activeSlug) {
fetchEvent();
} else {
setLoading(false);
}
}, [propSlug, searchParams]);
if (loading) {
return (
<Layout headerStyle={1} footerStyle={1}>
<div style={{ padding: '150px 0', textAlign: 'center' }}>
<div className="spinner-border" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
</Layout>
);
}
if (!event) { if (!event) {
return null; return (
<Layout headerStyle={1} footerStyle={1}>
<div style={{ padding: '150px 0', textAlign: 'center' }}>
<h2>Event not found</h2>
<div className="space20" />
<Link href="/upcoming-event" className="vl-btn3">
<span className="demo">Back to Events</span>
</Link>
</div>
</Layout>
);
} }
const eventDate = formatEventDate(event.date); const eventDate = formatEventDate(event.date);

247
components/home/HomeUpcomingEvent.tsx
View File

@ -1,16 +1,40 @@
'use client' 'use client'
import Link from 'next/link' import Link from 'next/link'
import { useState } from "react" import { useState, useEffect } from "react"
import { events } from "@/utility/constant.utils" // import your events array import axios from "axios"
import { events as staticEvents } from "@/utility/constant.utils"
export default function HomeUpcomingEvent() { export default function HomeUpcomingEvent() {
const [isTab, setIsTab] = useState(1) const [isTab, setIsTab] = useState(1)
const handleTab = (i: number) => { const [liveEvents, setLiveEvents] = useState<any[]>([])
setIsTab(i)
}
// Take only the first 3 events useEffect(() => {
const displayEvents = events.slice(0, 3) as any[]; const fetchEvents = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
if (response.data && response.data.success && response.data.data.length > 0) {
const normalizedEvents = response.data.data.map((e: any) => ({
...e,
title: e.title || e.eventtitle,
date: e.date || e.eventdate,
image: e.image || e.eventimageurl,
desc: e.description || e.desc || e.eventdescription,
btnText: e.btn_text || e.btnText,
link: e.link || `/upcoming-event/${e.slug || e.id}`,
location: e.location || e.venue,
}));
setLiveEvents(normalizedEvents);
}
} catch (error) {
console.error("Error fetching homepage upcoming events:", error);
}
};
fetchEvents();
}, []);
// Take only the first 3 events from API or fallback
const displayEvents = (liveEvents.length > 0 ? liveEvents : staticEvents).slice(0, 3) as any[];
return ( return (
<> <>
@ -44,117 +68,118 @@ export default function HomeUpcomingEvent() {
<div className="row align-items-center"> <div className="row align-items-center">
{/* Alternating layout */} {/* Alternating layout */}
{idx % 2 === 0 ? ( {idx % 2 === 0 ? (
<> <>
<div className="col-lg-5"> <div className="col-lg-5">
<div className="img1"> <div className="img1">
<img src={event.image} alt={event.title} /> <img src={event.image} alt={event.title} />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href={event.url || "#"}>
<span className='d-flex g-3 metered-data align-items-end'>
<img src="/assets/img/icons/clock1.svg" alt="" />
{event.time ? event.time + " - " : ""}{event.date}<span> | </span>
</span>
</Link>
</li>
<li>
<Link href={event.url || "#"}>
<span className='d-flex g-3 metered-data align-items-end'> <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
</span>
</Link>
</li>
</ul>
<div className="space20" />
<Link href={event.link || "#"} className="head">{event.title}</Link>
<div className="space24" />
<p
style={{
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{event.desc}
</p>
<div className="space24" />
<div className="btn-area1">
<Link
href={buttonHref}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
>
<span className="demo">{event.btnText || "purchase ticket"}</span>
</Link>
</div> </div>
</div> </div>
</div> <div className="col-lg-2" />
</> <div className="col-lg-5">
) : ( <div className="content-area">
<> <ul>
<div className="col-lg-6 order-2 order-lg-1"> <li>
<div className="content-area"> <Link href={event.url || "#"}>
<ul> <span className='d-flex g-3 metered-data align-items-end'>
<li> <img src="/assets/img/icons/clock1.svg" alt="" />
<Link href={event.url || "#"}> {event.time ? event.time + " - " : ""}{event.date}<span> | </span>
<span className='d-flex g-3 metered-data align-items-end'> </span>
<img src="/assets/img/icons/clock1.svg" alt="" /> </Link>
{event.time ? event.time + " - " : ""}{event.date}<span> | </span> </li>
</span> <li>
</Link> <Link href={event.url || "#"}>
</li> <span className='d-flex g-3 metered-data align-items-end'> <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
<li> </span>
<Link href={event.url || "#"}>
<span className='d-flex g-3 metered-data align-items-end'> <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
</span>
</Link> </Link>
</li> </li>
</ul> </ul>
<div className="space20" /> <div className="space20" />
<Link href={event.link || "#"} className="head">{event.title}</Link> <Link href={event.link || "#"} className="head">{event.title}</Link>
<div className="space24" /> <div className="space24" />
<p <p
style={{ style={{
display: '-webkit-box', display: '-webkit-box',
WebkitLineClamp: 1, WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
}} }}
>
{event.desc}
</p>
<div className="space24" />
<div className="btn-area1">
<Link
href={buttonHref}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
> >
<span className="demo">{event.btnText || "purchase ticket"}</span> {event.desc}
</Link> </p>
</div> <div className="space24" />
<div className="btn-area1">
<Link
href={buttonHref}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
>
<span className="demo">{event.btnText || "purchase ticket"}</span>
</Link>
</div>
</div>
</div> </div>
<div className="space30 d-lg-none d-block" /> </>
</div> ) : (
<div className="col-lg-5 order-1 order-lg-2"> <>
<div className="img1"> <div className="col-lg-5 order-2 order-lg-1">
<img src={event.image} alt={event.title} /> <div className="content-area">
<ul>
<li>
<Link href={event.url || "#"}>
<span className='d-flex g-3 metered-data align-items-end'>
<img src="/assets/img/icons/clock1.svg" alt="" />
{event.time ? event.time + " - " : ""}{event.date}<span> | </span>
</span>
</Link>
</li>
<li>
<Link href={event.url || "#"}>
<span className='d-flex g-3 metered-data align-items-end'> <img src="/assets/img/icons/location1.svg" alt="" />{event.location}
</span>
</Link>
</li>
</ul>
<div className="space20" />
<Link href={event.link || "#"} className="head">{event.title}</Link>
<div className="space24" />
<p
style={{
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{event.desc}
</p>
<div className="space24" />
<div className="btn-area1">
<Link
href={buttonHref}
className="vl-btn3"
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
>
<span className="demo">{event.btnText || "purchase ticket"}</span>
</Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div> </div>
</div> <div className="col-lg-2 order-1 order-lg-2" />
</> <div className="col-lg-5 order-1 order-lg-3">
)} <div className="img1">
</div> <img src={event.image} alt={event.title} />
</div>
</div>
</>
)}
</div>
</div> </div>
</div> </div>
</div> </div>

52
components/layout/MobileMenu.tsx
View File

@ -1,11 +1,31 @@
'use client' 'use client'
import { useState } from 'react'; import { useState, useEffect } from 'react';
import Link from 'next/link' import Link from 'next/link'
import { events } from "@/utility/constant.utils"; import axios from "axios";
export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) { export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
const [isAccordion, setIsAccordion] = useState<number | null>(null); const [isAccordion, setIsAccordion] = useState<number | null>(null);
const upcomingEvents = events.filter((event: any) => event.link); const [upcomingEvents, setUpcomingEvents] = useState<any[]>([]);
useEffect(() => {
const fetchEvents = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
if (response.data && response.data.success) {
const evts = response.data.data.map((e: any) => ({
id: e.id,
title: e.title || e.eventtitle,
link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`)
}));
setUpcomingEvents(evts);
}
} catch (error) {
console.error("Error fetching upcoming events for mobile menu:", error);
}
};
fetchEvents();
}, []);
const handleAccordion = (key: any) => { const handleAccordion = (key: any) => {
setIsAccordion(prevState => prevState === key ? null : key) setIsAccordion(prevState => prevState === key ? null : key)
@ -105,25 +125,15 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
</ul> </ul>
</li> </li>
<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 5 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(5)}><em /></span> <li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 5 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(5)}><em /></span>
<Link href="#" className="hash-nav">Events</Link> <Link href="/upcoming-event" className="hash-nav">Upcoming Event</Link>
<ul className={`sub-menu ${isAccordion === 5 ? "open-sub" : ""}`} style={{ display: `${isAccordion === 5 ? "block" : "none"}` }}> <ul className={`sub-menu ${isAccordion === 5 ? "open-sub" : ""}`} style={{ display: `${isAccordion === 5 ? "block" : "none"}` }}>
<li className={`hash-has-sub ${subAccordion === 1 ? "open-sub" : ""}`}> {upcomingEvents.map((event: any) => (
<Link href="/upcoming-event" className="hash-nav" onClick={() => setSubAccordion(subAccordion === 1 ? 0 : 1)}> <li key={event.id}>
Upcoming Event <Link href={event.link} className="hash-nav">
</Link> {event.title}
<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}> </Link>
{upcomingEvents.map((event: any) => ( </li>
<li key={event.id}> ))}
<Link href={event.link} className="hash-nav">
{event.title}
</Link>
</li>
))}
</ul>
</li>
<li>
<Link href="/photo-gallery" className="hash-nav">Photos Gallery</Link>
</li>
</ul> </ul>
</li> </li>
<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span> <li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span>

54
components/layout/header/Header1.tsx
View File

@ -1,17 +1,37 @@
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import React, { useState } from "react"; import React, { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules"; import { Autoplay, Pagination } from "swiper/modules";
import { events } from "@/utility/constant.utils"; import axios from "axios";
import "swiper/css"; import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) { export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
const [mobileMenu, setMobileMenu] = useState(false); const [mobileMenu, setMobileMenu] = useState(false);
const upcomingEvents = events.filter((event: any) => event.link); const [upcomingEvents, setUpcomingEvents] = useState<any[]>([]);
useEffect(() => {
const fetchEvents = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
if (response.data && response.data.success) {
const evts = response.data.data.map((e: any) => ({
id: e.id,
title: e.title || e.eventtitle,
link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`)
}));
setUpcomingEvents(evts);
}
} catch (error) {
console.error("Error fetching upcoming events for header:", error);
}
};
fetchEvents();
}, []);
return ( return (
<> <>
@ -55,7 +75,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
style={{ background: "#000000ff", borderTop: "1px solid #cbc5c557" }} style={{ background: "#000000ff", borderTop: "1px solid #cbc5c557" }}
> >
<div className="container"> <div className="container-fluid px-3 px-xl-5">
<div className="row"> <div className="row">
<div className="col-lg-12"> <div className="col-lg-12">
<div className="header-elements"> <div className="header-elements">
@ -63,7 +83,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
<Link href="/"><img src="/assets/img/logo-tca.png" alt="logo" /></Link> <Link href="/"><img src="/assets/img/logo-tca.png" alt="logo" /></Link>
</div> </div>
<div className="main-menu"> <div className="main-menu">
<ul> <ul style={{ display: 'flex', alignItems: 'center', flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
<li> <li>
<Link href="/#">Home</Link> <Link href="/#">Home</Link>
{/* <div className="tp-submenu"> {/* <div className="tp-submenu">
@ -235,23 +255,15 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
</ul> </ul>
</li> </li>
<li> <li>
<Link href="#">Events <i className="fa-solid fa-angle-down" /></Link> <Link href="/upcoming-event">Upcoming Event <i className="fa-solid fa-angle-down" /></Link>
<ul className="dropdown-padding"> <ul className="dropdown-padding">
<li className="dropdown-submenu"> {upcomingEvents.map((event: any) => (
<Link href="/upcoming-event"> <li key={event.id}>
Upcoming Event <i className="fa-solid fa-angle-down" /> <Link href={event.link}>
</Link> {event.title}
<ul className="submenu"> </Link>
{upcomingEvents.map((event: any) => ( </li>
<li key={event.id}> ))}
<Link href={event.link}>
{event.title}
</Link>
</li>
))}
</ul>
</li>
{/* <li><Link href="/photo-gallery">Photos Gallery</Link></li> */}
</ul> </ul>
</li> </li>
<li> <li>

3
next.config.mjs
View File

@ -1,8 +1,7 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
output: "export",
reactStrictMode: false, reactStrictMode: false,
trailingSlash: true, // if needed for static export trailingSlash: true,
}; };
export default nextConfig; export default nextConfig;

44
public/assets/css/main.css
View File

@ -9762,7 +9762,7 @@ html {
color: #000000cf; color: #000000cf;
display: inline-block; display: inline-block;
transition: all 0.4s; transition: all 0.4s;
padding: 0 20px; padding: 0 12px;
} }
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover>a { .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover>a {
@ -9795,7 +9795,9 @@ html {
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 100px; top: 100px;
width: 225px; min-width: 360px;
width: max-content;
max-width: 440px;
z-index: 1; z-index: 1;
transition: all 0.4s; transition: all 0.4s;
border-radius: 5px; border-radius: 5px;
@ -9875,11 +9877,13 @@ html {
font-weight: var(--ztc-weight-medium); font-weight: var(--ztc-weight-medium);
transition: all 0.4s; transition: all 0.4s;
padding: 8px; padding: 8px;
display: inline-block; display: block;
position: relative; position: relative;
z-index: 1; z-index: 1;
border-radius: 4px; border-radius: 4px;
color: var(--ztc-text-text-2); color: var(--ztc-text-text-2);
white-space: normal;
word-break: break-word;
} }
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a::after { .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a::after {
@ -10252,7 +10256,9 @@ html {
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 201.3%; top: 201.3%;
transform: scale(1, 0); transform: scale(1, 0);
width: 225px; min-width: 360px;
width: max-content;
max-width: 440px;
z-index: 0; z-index: 0;
transition: all 0.4s; transition: all 0.4s;
border-radius: 5px; border-radius: 5px;
@ -18048,7 +18054,8 @@ html {
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #E6E7E8; background: #E6E7E8;
@ -18082,7 +18089,8 @@ html {
background: #FFBA00; background: #FFBA00;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
} }
@ -24348,7 +24356,8 @@ html {
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #E6E7E8; background: #E6E7E8;
@ -24382,7 +24391,8 @@ html {
background: var(--ztc-text-text-15); background: var(--ztc-text-text-15);
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
} }
@ -25296,7 +25306,8 @@ html {
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #E6E7E8; background: #E6E7E8;
@ -25330,7 +25341,8 @@ html {
background: #FFBA00; background: #FFBA00;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
} }
@ -25610,7 +25622,8 @@ html {
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #5D9BFA; background: #5D9BFA;
@ -25644,7 +25657,8 @@ html {
background: linear-gradient(135deg, #FF7A00 0%, #F00 100%); background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
} }
@ -26989,7 +27003,8 @@ html {
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #E6E7E8; background: #E6E7E8;
@ -27023,7 +27038,8 @@ html {
background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%)); background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
} }

BIN
public/assets/img/event/upcoming-event/tca-singapengal-information-night.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 757 KiB

6
public/assets/scss/layout/header/_header-1.scss
View File

@ -158,7 +158,7 @@ html {
color: var(--ztc-text-text-2); color: var(--ztc-text-text-2);
display: inline-block; display: inline-block;
transition: all .4s; transition: all .4s;
padding: 0 20px; padding: 0 12px;
} }
&:hover>a { &:hover>a {
@ -192,7 +192,9 @@ html {
position: absolute; position: absolute;
background: var(--ztc-text-text-1); background: var(--ztc-text-text-1);
top: 100px; top: 100px;
width: 225px; min-width: 360px;
width: max-content;
max-width: 440px;
z-index: 1; z-index: 1;
transition: all .4s; transition: all .4s;
border-radius: 5px; border-radius: 5px;

24
public/assets/scss/layout/pages/_event.scss
View File

@ -597,7 +597,8 @@
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #E6E7E8; background: #E6E7E8;
@ -627,7 +628,8 @@
background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%)); background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
@ -1558,7 +1560,8 @@
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #E6E7E8; background: #E6E7E8;
@ -1588,7 +1591,8 @@
background: #FFBA00; background: #FFBA00;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
@ -1871,7 +1875,8 @@
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #5D9BFA; background: #5D9BFA;
@ -1901,7 +1906,8 @@
background: linear-gradient(135deg, #FF7A00 0%, #F00 100%); background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;
@ -2967,7 +2973,8 @@
content: ""; content: "";
height: 93%; height: 93%;
width: 1px; width: 1px;
left: 45.7%; left: 50%;
transform: translateX(-50%);
top: 0; top: 0;
transition: all 0.4s; transition: all 0.4s;
background: #E6E7E8; background: #E6E7E8;
@ -2997,7 +3004,8 @@
background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%)); background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 43%; left: 50%;
transform: translateX(-50%);
top: 88px; top: 88px;
z-index: 1; z-index: 1;