Added past events page and link to page

celestiaorg · Jan 22, 2025 · 9707218 · 9707218
1 parent 629cf12
commit 9707218
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 4 deletions.
diff --git a/src/app/events/page.js b/src/app/events/page.js
@@ -5,7 +5,10 @@ import { eventData } from "@/data/events/event";
 import EventCard from "@/components/EventList/EventCard";
 import Container from "@/components/Container/Container";
 import { Row, Col } from "@/macros/Grids";
-import { Display, Body } from "@/macros/Copy";
+import { Display, Body, Heading } from "@/macros/Copy";
+import Icon from "@/macros/Icons/Icon";
+import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
+import Link from "@/macros/Link/Link";
 
 export const metadata = meta(seo);
 
@@ -42,7 +45,7 @@ const EventsPage = () => {
 	return (
 		<section className={`bg-white-weak relative flex flex-col-reverse md:block content-center`}>
 			<Container size={`lg`} className='flex flex-col pb-16 pt-36 lg:pt-56 lg:pb-28 lg:w-3/4 xl:w-2/3'>
-				<Row className='mb-[70px] flex flex-col lg:flex-row gap-3 lg:items-center'>
+				<Row className='mb-[4.375rem] flex flex-col lg:flex-row gap-3 lg:items-center'>
 					<Col width={50}>
 						<Display size='md' tag='h1'>
 							Events
@@ -51,7 +54,9 @@ const EventsPage = () => {
 					<Col width={50}>
 						<Body
 							size='md'
-							className={"max-w-[502px] lg:text-[18px] lg:leading-[26px] lg:tracking-[0.225px] lg:font-normal lg:text-[#17141A]"}
+							className={
+								"max-w-[31.375rem] lg:text-[1.125rem] lg:leading-[1.625rem] lg:tracking-[.0141rem] lg:font-normal lg:text-[#17141A]"
+							}
 						>
 							Hangout with the Celestia community IRL or online.
 						</Body>
@@ -102,6 +107,25 @@ const EventsPage = () => {
 						</div>
 					</Col>
 				</Row>
+				<Row className='flex items-center justify-between max-sm:justify-center'>
+					<Heading tag={"h2"} className={`max-sm:hidden`} size={"md"}>
+						Past Events
+					</Heading>
+					<Link href={"/past-events"} className='group'>
+						<div className='flex items-center gap-6'>
+							<span>View all past events</span>
+							<Icon
+								Icon={<ArrowLongSVG />}
+								hover
+								HoverIcon={<ArrowLongSVG />}
+								className={`flex-grow-0`}
+								direction={`top-right`}
+								border
+								size={"lg"}
+							/>
+						</div>
+					</Link>
+				</Row>
 			</Container>
 		</section>
 	);

diff --git a/src/app/past-events/page.js b/src/app/past-events/page.js
@@ -0,0 +1,88 @@
+import * as React from "react";
+import meta from "@/components/Meta/Meta";
+import seo from "@/data/events/past-events-seo";
+import { eventData } from "@/data/events/event";
+import EventCard from "@/components/EventList/EventCard";
+import Container from "@/components/Container/Container";
+import { Row, Col } from "@/macros/Grids";
+import { Display, Body } from "@/macros/Copy";
+
+export const metadata = meta(seo);
+
+const PastEventsPage = () => {
+	const pastEvents = eventData
+		.filter((event) => {
+			// Filter out invalid entries
+			if (!event?.id) return false;
+
+			// Handle date-based events
+			try {
+				if (!event.startDate.includes("-")) return false;
+				return new Date(event.startDate) < new Date();
+			} catch (e) {
+				console.error("Invalid date format:", event.startDate);
+				return false;
+			}
+		})
+		.sort((a, b) => {
+			try {
+				// Sort in reverse chronological order (newest to oldest)
+				return new Date(b.startDate) - new Date(a.startDate);
+			} catch (e) {
+				return 0;
+			}
+		});
+
+	return (
+		<section className={`bg-white-weak relative flex flex-col-reverse md:block content-center`}>
+			<Container size={`lg`} className='flex flex-col pb-16 pt-36 lg:pt-56 lg:pb-28 lg:w-3/4 xl:w-2/3'>
+				<Row className='mb-[4.375rem] flex flex-col lg:flex-row gap-3 lg:items-center'>
+					<Col width={50}>
+						<Display size='md' tag='h1'>
+							Past Events
+						</Display>
+					</Col>
+					<Col width={50}>
+						<Body
+							size='md'
+							className={
+								"max-w-[31.375rem] lg:text-[1.125rem] lg:leading-[1.625rem] lg:tracking-[.0141rem] lg:font-normal lg:text-[#17141A]"
+							}
+						>
+							Explore past Celestia community events and gatherings.
+						</Body>
+					</Col>
+				</Row>
+
+				{/* Past Events Grid */}
+				<Row>
+					<Col width={100}>
+						<div className='grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2'>
+							{pastEvents.length > 0 ? (
+								pastEvents.map((event) => (
+									<EventCard
+										key={event.id}
+										title={event.title}
+										startDate={event.startDate}
+										endDate={event.endDate}
+										location={event.location}
+										url={event.url}
+										image={event.image}
+										featured={false}
+										category={event.category}
+									/>
+								))
+							) : (
+								<div className='col-span-2 py-8 text-center'>
+									<Body size='md'>No past events to display.</Body>
+								</div>
+							)}
+						</div>
+					</Col>
+				</Row>
+			</Container>
+		</section>
+	);
+};
+
+export default PastEventsPage;
diff --git a/src/components/EventList/EventCard.js b/src/components/EventList/EventCard.js
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React from "react";
 import Image from "next/image";
 import { Heading } from "@/macros/Copy";
 import SecondaryButton from "@/macros/Buttons/SecondaryButton";

diff --git a/src/data/events/past-events-seo.js b/src/data/events/past-events-seo.js
@@ -0,0 +1,8 @@
+const seoContent = {
+	title: "Past Events | celestia.org",
+	ogTitle: "Past Events | celestia.org",
+	description: "Explore past Celestia community events and gatherings.",
+	image: "/meta/og-image.jpg",
+};
+
+export default seoContent;