updated the upcoming events on the site and fixed the menu with the latest events.
This commit is contained in:
metatroncubeswdev
parent
148344a4bb
commit
faa28ce093
31
app/(event)/upcoming-event/[slug]/page.jsx
Normal file
31
app/(event)/upcoming-event/[slug]/page.jsx
Normal file
@ -0,0 +1,31 @@
|
||||
import UpcomingEventSinglePage from "@/components/events/UpcomingEventSinglePage";
|
||||
import { events } from "@/utility/constant.utils";
|
||||
|
||||
const getEvent = (slug) => events.find((event) => event.slug === slug);
|
||||
|
||||
export function generateStaticParams() {
|
||||
return events
|
||||
.filter((event) => event.slug)
|
||||
.map((event) => ({
|
||||
slug: event.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }) {
|
||||
const event = getEvent(params.slug);
|
||||
|
||||
if (!event) {
|
||||
return {
|
||||
title: "Upcoming Event | Tamil Culture Waterloo",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${event.title} | Tamil Culture Waterloo`,
|
||||
description: event.desc || `Details for ${event.title}.`,
|
||||
};
|
||||
}
|
||||
|
||||
export default function Page({ params }) {
|
||||
return <UpcomingEventSinglePage slug={params.slug} />;
|
||||
}
|
||||
@ -33,11 +33,11 @@ export default function UpcomingEventData() {
|
||||
|
||||
const formatEventDate = (dateStr) => {
|
||||
if (!dateStr) return "";
|
||||
const m = moment(dateStr);
|
||||
if (m.isValid()) {
|
||||
return m.format("ddd, MMM DD, YYYY");
|
||||
}
|
||||
return dateStr;
|
||||
|
||||
return dateStr.replace(/\d{4}-\d{2}-\d{2}/g, (date) => {
|
||||
const m = moment(date, "YYYY-MM-DD", true);
|
||||
return m.isValid() ? m.format("ddd, MMM DD, YYYY") : date;
|
||||
});
|
||||
};
|
||||
|
||||
// Navigate months
|
||||
@ -129,6 +129,8 @@ export default function UpcomingEventData() {
|
||||
<div className="event-widget-area">
|
||||
{events.map((event, idx) => {
|
||||
const isEven = (idx + 1) % 2 === 0;
|
||||
const buttonHref = event.url || event.link || "#";
|
||||
const isExternalButton = /^https?:\/\//.test(buttonHref);
|
||||
|
||||
return (
|
||||
<div key={event.id} className="mb-5">
|
||||
@ -184,7 +186,11 @@ export default function UpcomingEventData() {
|
||||
|
||||
<div className="space24" />
|
||||
<div className="btn-area1">
|
||||
<Link href={event.url || "#"} className="vl-btn3" target='_blank'>
|
||||
<Link
|
||||
href={buttonHref}
|
||||
className="vl-btn3"
|
||||
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
||||
>
|
||||
<span className="demo">{event.btnText || "Online Tickets"}</span>
|
||||
</Link>
|
||||
</div>
|
||||
@ -228,7 +234,11 @@ export default function UpcomingEventData() {
|
||||
</p>
|
||||
<div className="space24" />
|
||||
<div className="btn-area1">
|
||||
<Link href={event.url || "#"} className="vl-btn3" target='_blank'>
|
||||
<Link
|
||||
href={buttonHref}
|
||||
className="vl-btn3"
|
||||
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
||||
>
|
||||
<span className="demo">{event.btnText || "Online Tickets"}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
150
components/events/UpcomingEventSinglePage.jsx
Normal file
150
components/events/UpcomingEventSinglePage.jsx
Normal file
@ -0,0 +1,150 @@
|
||||
import Layout from "@/components/layout/Layout";
|
||||
import Link from "next/link";
|
||||
import moment from "moment";
|
||||
import { events } from "@/utility/constant.utils";
|
||||
|
||||
const formatEventDate = (dateStr) => {
|
||||
if (!dateStr) return "Details will be announced";
|
||||
|
||||
return dateStr.replace(/\d{4}-\d{2}-\d{2}/g, (date) => {
|
||||
const m = moment(date, "YYYY-MM-DD", true);
|
||||
return m.isValid() ? m.format("MMM D, YYYY") : date;
|
||||
});
|
||||
};
|
||||
|
||||
export default function UpcomingEventSinglePage({ slug }) {
|
||||
const event = events.find((item) => item.slug === slug);
|
||||
|
||||
if (!event) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const eventDate = formatEventDate(event.date);
|
||||
const eventLocation = event.location || "Venue will be confirmed";
|
||||
|
||||
return (
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
<div>
|
||||
<div
|
||||
className="inner-page-header"
|
||||
style={{
|
||||
backgroundImage: "url(/assets/img/event/upcoming-event/upcoming-events-banner.webp)",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 m-auto">
|
||||
<div className="heading1">
|
||||
<h1>{event.title}</h1>
|
||||
<div className="space20" />
|
||||
<Link href="/">
|
||||
Home <i className="fa-solid fa-angle-right" />{" "}
|
||||
<span>{event.title}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="blog-details-section sp4 pb-4 mb-4">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="blog-deatils-content heading2">
|
||||
<div className="about2-header heading4 text-center">
|
||||
<h2 className="text-anime-style-3">{event.title}</h2>
|
||||
<div className="space16" />
|
||||
<p>{event.desc || "More details will be updated soon."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="about6-section-area sp4 pt-0">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6 order-2 order-lg-1">
|
||||
<div
|
||||
className="img text-center"
|
||||
style={{
|
||||
background: "#f8f8f8",
|
||||
borderRadius: "8px",
|
||||
padding: "24px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={event.image}
|
||||
alt={event.title}
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "420px",
|
||||
height: "auto",
|
||||
objectFit: "contain",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 order-1 order-lg-2 mb-5">
|
||||
<div className="about2-header heading4">
|
||||
<h3 className="text-anime-style-3">Event Details</h3>
|
||||
<div className="space16" />
|
||||
<div className="about6-header heading9 space-margin60 mb-4">
|
||||
<ul>
|
||||
<li>Date: {eventDate}</li>
|
||||
</ul>
|
||||
<div className="space18" />
|
||||
<ul>
|
||||
<li>Venue: {eventLocation}</li>
|
||||
</ul>
|
||||
<div className="space18" />
|
||||
<ul>
|
||||
<li>Time: Details will be announced</li>
|
||||
</ul>
|
||||
<div className="space18" />
|
||||
<ul>
|
||||
<li>Admission: Details will be announced</li>
|
||||
</ul>
|
||||
<div className="space18" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pricing-lan-section-area sp4 pt-0">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-10 m-auto">
|
||||
<div className="mission">
|
||||
<div className="heading2 mb-4">
|
||||
<h3>Additional Information</h3>
|
||||
</div>
|
||||
<ul className="list-unstyled">
|
||||
<li className="d-flex mb-3">
|
||||
<img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
|
||||
<span>Program details will be updated as they are confirmed.</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
|
||||
<span>Registration or ticket information will be added here when available.</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<img src="/assets/img/icons/check2.svg" alt="" className="me-2" />
|
||||
<span>Please check back closer to the event date for final details.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@ -30,7 +30,11 @@ export default function HomeUpcomingEvent() {
|
||||
<div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
|
||||
<div className="event-widget-area">
|
||||
|
||||
{displayEvents.map((event, idx) => (
|
||||
{displayEvents.map((event, idx) => {
|
||||
const buttonHref = event.url || event.link || "#";
|
||||
const isExternalButton = /^https?:\/\//.test(buttonHref);
|
||||
|
||||
return (
|
||||
<div key={event.id}>
|
||||
{idx > 0 && <div className={idx === 2 ? "space30" : "space48"} />}
|
||||
<div className="row">
|
||||
@ -82,7 +86,11 @@ export default function HomeUpcomingEvent() {
|
||||
</p>
|
||||
<div className="space24" />
|
||||
<div className="btn-area1">
|
||||
<Link href={event.url || "#"} target="_blank" rel="noopener noreferrer" className="vl-btn3">
|
||||
<Link
|
||||
href={buttonHref}
|
||||
className="vl-btn3"
|
||||
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
||||
>
|
||||
<span className="demo">{event.btnText || "purchase ticket"}</span>
|
||||
</Link>
|
||||
</div>
|
||||
@ -127,7 +135,11 @@ export default function HomeUpcomingEvent() {
|
||||
</p>
|
||||
<div className="space24" />
|
||||
<div className="btn-area1">
|
||||
<Link href={event.url || "#"} target="_blank" rel="noopener noreferrer" className="vl-btn3">
|
||||
<Link
|
||||
href={buttonHref}
|
||||
className="vl-btn3"
|
||||
{...(isExternalButton ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
||||
>
|
||||
<span className="demo">{event.btnText || "purchase ticket"}</span>
|
||||
</Link>
|
||||
</div>
|
||||
@ -147,7 +159,8 @@ export default function HomeUpcomingEvent() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
'use client'
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link'
|
||||
import { events } from "@/utility/constant.utils";
|
||||
|
||||
export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
|
||||
const [isAccordion, setIsAccordion] = useState<number | null>(null);
|
||||
const upcomingEvents = events.filter((event: any) => event.link);
|
||||
|
||||
const handleAccordion = (key: any) => {
|
||||
setIsAccordion(prevState => prevState === key ? null : key)
|
||||
@ -110,11 +112,13 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
|
||||
Upcoming Event
|
||||
</Link>
|
||||
<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}>
|
||||
<li>
|
||||
<Link href="/upcoming-event/tamil-cultural-nite-2025" className="hash-nav">
|
||||
Tamil Cultural Nite 2025
|
||||
{upcomingEvents.map((event: any) => (
|
||||
<li key={event.id}>
|
||||
<Link href={event.link} className="hash-nav">
|
||||
{event.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@ -4,12 +4,14 @@ import Link from "next/link";
|
||||
import React, { useState } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay, Pagination } from "swiper/modules";
|
||||
import { events } from "@/utility/constant.utils";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
|
||||
|
||||
const [mobileMenu, setMobileMenu] = useState(false);
|
||||
const upcomingEvents = events.filter((event: any) => event.link);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -240,11 +242,13 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
Upcoming Event <i className="fa-solid fa-angle-down" />
|
||||
</Link>
|
||||
<ul className="submenu">
|
||||
<li>
|
||||
<Link href="/upcoming-event/tamil-cultural-nite-2025">
|
||||
Tamil Cultural Nite 2025
|
||||
{upcomingEvents.map((event: any) => (
|
||||
<li key={event.id}>
|
||||
<Link href={event.link}>
|
||||
{event.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
<li><Link href="/photo-gallery">Photos Gallery</Link></li>
|
||||
|
||||
@ -4727,98 +4727,94 @@ export const heritageLanguage = [
|
||||
export const events = [
|
||||
{
|
||||
id: 1,
|
||||
date: "2026-01-24",
|
||||
title: "TCA Thai Pongal and Tamil Heritage Month Celebration 2026",
|
||||
location: "Rim Park, Waterloo",
|
||||
image: "/assets/img/pongal-2026.png",
|
||||
url: "#",
|
||||
btnText: "View Event"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: "2026-04-12",
|
||||
title: "AGM and Tamil New Year Celebrations",
|
||||
location: " Laurel Hights PS, Waterloo",
|
||||
image: "/assets/img/event/upcoming-event/tamil-new-year.webp",
|
||||
link: "/upcoming-event/tamil-cultural-nite-2025",
|
||||
btnText: "purchase ticket"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
date: "2026-04-25",
|
||||
time: "10:30 AM. Saturday",
|
||||
title: "Earth Day Cleanup",
|
||||
location: "RIM Park Baseball area",
|
||||
image: "/assets/img/event/upcoming-event/earth-day-cleanup.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
slug: "kw-multicultural-festival-2026",
|
||||
date: "2026-06-20 and 2026-06-21",
|
||||
title: "KW Multicultural Festival",
|
||||
location: "Victoria Park, Kitchener",
|
||||
image: "/assets/img/event/upcoming-event/multicultural-festival.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/kw-multicultural-festival-2026",
|
||||
url: "/upcoming-event/kw-multicultural-festival-2026",
|
||||
desc: "KW Multicultural Festival will take place on Jun 20-21, 2026 at Victoria Park, Kitchener. More details will be updated soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
id: 2,
|
||||
slug: "family-picnic-2026",
|
||||
date: "2026-07-11",
|
||||
title: "Family Picnic",
|
||||
location: "Pinehurst, Ayr",
|
||||
image: "/assets/img/event/upcoming-event/family-picnic.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/family-picnic-2026",
|
||||
url: "/upcoming-event/family-picnic-2026",
|
||||
desc: "Family Picnic will take place on Jul 11, 2026 at Pinehurst, Ayr. More details will be updated soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
id: 3,
|
||||
slug: "sports-day-2026",
|
||||
date: "2026-07-25 and 2026-07-26",
|
||||
title: "Sports Day",
|
||||
location: "Waterloo Park",
|
||||
image: "/assets/img/event/upcoming-event/sports-day.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/sports-day-2026",
|
||||
url: "/upcoming-event/sports-day-2026",
|
||||
desc: "Sports Day will take place on Jul 25-26, 2026 at Waterloo Park. More details will be updated soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 4,
|
||||
slug: "tree-planting-fall-2025",
|
||||
date: "Will be announced by City",
|
||||
title: "Tree Planting (Fall 2025)",
|
||||
image: "/assets/img/event/upcoming-event/tree-planting.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/tree-planting-fall-2025",
|
||||
url: "/upcoming-event/tree-planting-fall-2025",
|
||||
desc: "Tree Planting details will be announced by the City. More details will be updated soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
slug: "kalai-vizha-2026",
|
||||
date: "Oct 2026 (Date and Venue will be confirmed)",
|
||||
title: "Kalai Vizha",
|
||||
image: "/assets/img/event/upcoming-event/kalai-vizha.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/kalai-vizha-2026",
|
||||
url: "/upcoming-event/kalai-vizha-2026",
|
||||
desc: "Kalai Vizha is planned for Oct 2026. Date and venue will be confirmed soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
date: "2026-11-4 (Proposed)",
|
||||
slug: "wpl-tca-deepavali-festival-2026",
|
||||
date: "2026-11-04 (Proposed)",
|
||||
title: "WPL & TCA Deepavali Festival",
|
||||
image: "/assets/img/event/upcoming-event/deepavali-fest.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/wpl-tca-deepavali-festival-2026",
|
||||
url: "/upcoming-event/wpl-tca-deepavali-festival-2026",
|
||||
desc: "WPL & TCA Deepavali Festival is proposed for Nov 4, 2026. More details will be updated soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
slug: "year-end-celebration-2026",
|
||||
date: "2026-12-05",
|
||||
title: "Year-End Celebration",
|
||||
image: "/assets/img/event/upcoming-event/year-end-celebration.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/year-end-celebration-2026",
|
||||
url: "/upcoming-event/year-end-celebration-2026",
|
||||
desc: "Year-End Celebration will take place on Dec 5, 2026. More details will be updated soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
slug: "pongal-tamil-heritage-month-celebration-2027",
|
||||
date: "2027-01-17",
|
||||
title: "Pongal and Tamil Heritage Month Celebration",
|
||||
image: "/assets/img/event/upcoming-event/pongal.webp",
|
||||
url: "#",
|
||||
btnText: "purchase ticket"
|
||||
link: "/upcoming-event/pongal-tamil-heritage-month-celebration-2027",
|
||||
url: "/upcoming-event/pongal-tamil-heritage-month-celebration-2027",
|
||||
desc: "Pongal and Tamil Heritage Month Celebration will take place on Jan 17, 2027. More details will be updated soon.",
|
||||
btnText: "Details Coming Soon"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user