151 lines
7.2 KiB
JavaScript
151 lines
7.2 KiB
JavaScript
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>
|
|
);
|
|
}
|