From faa28ce09384ffcd3e225084360346c153c24569 Mon Sep 17 00:00:00 2001 From: metatroncubeswdev Date: Fri, 5 Jun 2026 21:53:47 -0400 Subject: [PATCH] updated the upcoming events on the site and fixed the menu with the latest events. --- app/(event)/upcoming-event/[slug]/page.jsx | 31 ++++ components/events/UpcomingEventData.jsx | 24 ++- components/events/UpcomingEventSinglePage.jsx | 150 ++++++++++++++++++ components/home/HomeUpcomingEvent.tsx | 41 +++-- components/layout/MobileMenu.tsx | 14 +- components/layout/header/Header1.tsx | 14 +- utility/constant.utils.js | 94 ++++++----- 7 files changed, 288 insertions(+), 80 deletions(-) create mode 100644 app/(event)/upcoming-event/[slug]/page.jsx create mode 100644 components/events/UpcomingEventSinglePage.jsx diff --git a/app/(event)/upcoming-event/[slug]/page.jsx b/app/(event)/upcoming-event/[slug]/page.jsx new file mode 100644 index 0000000..1e5cf6e --- /dev/null +++ b/app/(event)/upcoming-event/[slug]/page.jsx @@ -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 ; +} diff --git a/components/events/UpcomingEventData.jsx b/components/events/UpcomingEventData.jsx index 9d90f67..c3b390e 100644 --- a/components/events/UpcomingEventData.jsx +++ b/components/events/UpcomingEventData.jsx @@ -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() {
{events.map((event, idx) => { const isEven = (idx + 1) % 2 === 0; + const buttonHref = event.url || event.link || "#"; + const isExternalButton = /^https?:\/\//.test(buttonHref); return (
@@ -184,7 +186,11 @@ export default function UpcomingEventData() {
- + {event.btnText || "Online Tickets"}
@@ -228,7 +234,11 @@ export default function UpcomingEventData() {

- + {event.btnText || "Online Tickets"}
diff --git a/components/events/UpcomingEventSinglePage.jsx b/components/events/UpcomingEventSinglePage.jsx new file mode 100644 index 0000000..4961f86 --- /dev/null +++ b/components/events/UpcomingEventSinglePage.jsx @@ -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 ( + +
+
+
+
+
+
+

{event.title}

+
+ + Home {" "} + {event.title} + +
+
+
+
+
+ +
+
+
+
+
+
+

{event.title}

+
+

{event.desc || "More details will be updated soon."}

+
+
+
+
+
+
+ +
+
+
+
+
+ {event.title} +
+
+
+
+

Event Details

+
+
+
    +
  • Date: {eventDate}
    • +
+
+
    +
  • Venue: {eventLocation}
    • +
+
+
    +
  • Time: Details will be announced
    • +
+
+
    +
  • Admission: Details will be announced
    • +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+

Additional Information

+
+
    +
  • + + Program details will be updated as they are confirmed. +
    • +
  • + + Registration or ticket information will be added here when available. +
    • +
  • + + Please check back closer to the event date for final details. +
    • +
+
+
+
+
+
+
+ + ); +} diff --git a/components/home/HomeUpcomingEvent.tsx b/components/home/HomeUpcomingEvent.tsx index 39533e5..fabfa2c 100644 --- a/components/home/HomeUpcomingEvent.tsx +++ b/components/home/HomeUpcomingEvent.tsx @@ -30,16 +30,20 @@ export default function HomeUpcomingEvent() {
- {displayEvents.map((event, idx) => ( -
- {idx > 0 &&
} -
-
-
-

{String(idx + 1).padStart(2, "0")}

-
- {/* Alternating layout */} - {idx % 2 === 0 ? ( + {displayEvents.map((event, idx) => { + const buttonHref = event.url || event.link || "#"; + const isExternalButton = /^https?:\/\//.test(buttonHref); + + return ( +
+ {idx > 0 &&
} +
+
+
+

{String(idx + 1).padStart(2, "0")}

+
+ {/* Alternating layout */} + {idx % 2 === 0 ? ( <>
@@ -82,7 +86,11 @@ export default function HomeUpcomingEvent() {

- + {event.btnText || "purchase ticket"}
@@ -127,7 +135,11 @@ export default function HomeUpcomingEvent() {

- + {event.btnText || "purchase ticket"}
@@ -143,11 +155,12 @@ export default function HomeUpcomingEvent() { )}
+
-
- ))} + ) + })}
diff --git a/components/layout/MobileMenu.tsx b/components/layout/MobileMenu.tsx index ecc7f63..ebdc893 100644 --- a/components/layout/MobileMenu.tsx +++ b/components/layout/MobileMenu.tsx @@ -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(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
    -
  • - - Tamil Cultural Nite 2025 - -
    • + {upcomingEvents.map((event: any) => ( +
  • + + {event.title} + +
    • + ))}
  • diff --git a/components/layout/header/Header1.tsx b/components/layout/header/Header1.tsx index 3badf8d..4faf32d 100644 --- a/components/layout/header/Header1.tsx +++ b/components/layout/header/Header1.tsx @@ -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
      -
    • - - Tamil Cultural Nite 2025 - -
      • + {upcomingEvents.map((event: any) => ( +
    • + + {event.title} + +
      • + ))}
  • Photos Gallery
    • diff --git a/utility/constant.utils.js b/utility/constant.utils.js index 8f7815b..5c6e422 100644 --- a/utility/constant.utils.js +++ b/utility/constant.utils.js @@ -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) ", + 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" } ];