add schedule

package.json

@@ -17,13 +17,14 @@
     "@sendgrid/mail": "^7.7.0",
     "@types/mailchimp__mailchimp_transactional": "^1.0.5",
     "@types/node": "18.11.18",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/react-qr-reader": "^2.1.4",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
     "classnames": "^2.3.2",
     "client-only": "^0.0.1",
+    "date-fns": "^2.30.0",
     "dot": "^1.1.3",
     "eslint": "8.33.0",
     "eslint-config-next": "^13.4.7",

src/app/page.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+
 import { SVGProps } from 'react-html-props'
 import { twJoin } from 'tailwind-merge'
 
 import { Box } from '@/components/Box'
 import { LinkButton } from '@/components/Button'
+import { getEvents, HackathonCalendar } from '@/components/calendar'
 import { ClippedBadge } from '@/components/ClippedBadge'
 import { HackTicket } from '@/components/HackTicket'
 import { SponsorTicket, SponsorTicketKind } from '@/components/SponsorTicket'
@@ -97,7 +99,9 @@ const CTAArrow = ({ ...props }: CTAArrowProps) => {
 }
 
 export default async function Landing() {
-	// const [events, faqs] = await Promise.all([getEvents(), getFaqs()])
+	const startDate = new Date('10/07/2023 06:00:00')
+	const endDate = new Date('10/08/2023 18:00:00')
+	const events = await getEvents()
 	const faqs = await getFaqs()
 	const sponsors = [
 		{
@@ -134,6 +138,7 @@ export default async function Landing() {
 
 	return (
 		<>
+
 			<Box
 				direction="column"
 				alignItems="center"
@@ -174,7 +179,7 @@ export default async function Landing() {
 							<WavyPattern className="w-32" />
 						</h2>
 						<div className="font-shrimp text-white tracking-wider uppercase">
-							Coming soon...
+						<HackathonCalendar startDate={startDate} endDate={endDate} events={events}/>
 						</div>
 						<ClippedBadge className="md:block hidden w-[150px] h-[150px] absolute right-[10%] rotate-[15deg] mt-[-5rem]" />
 					</section>

src/components/calendar.tsx

@@ -0,0 +1,66 @@
+// components/HackathonCalendar.tsx
+import { format, isSameDay } from 'date-fns';
+import { WithId } from 'mongodb';
+
+import clientPromise from '@/lib/db';
+import { EventModel } from '@/lib/db/models/Event';
+import logger from '@/lib/logger';
+
+export async function getEvents(): Promise<WithId<EventModel>[] | undefined> {
+  try {
+		const client = await clientPromise
+		const events = await client.db()
+			.collection<EventModel>('events')
+			.find()
+			.toArray()
+
+		return events
+  } catch (error) {
+    logger.error(error);
+  }
+}
+
+interface HackathonCalendarProps {
+  startDate: Date;
+  endDate: Date;
+  events: WithId<EventModel>[] | undefined;
+}
+
+ export function HackathonCalendar({ startDate, endDate, events }: HackathonCalendarProps) {
+  const eventsForBothDays = events?.filter(event =>
+    isSameDay(new Date(event.date), startDate) || isSameDay(new Date(event.date), endDate)
+  );
+  return (
+    <div className="container mx-auto p-8">
+      <div className="grid md:grid-cols-2 grid-cols-1 gap-16">
+        <div>
+          <h2 className="text-xl font-semibold">{format(startDate, 'MMMM d, yyyy')}</h2>
+          {eventsForBothDays?.map((event, index) => (
+            isSameDay(new Date(event.date), startDate) && (
+              <div key={index} className="border rounded p-4 mb-2">
+                <h3 className="text-sm break-words">{event.title}</h3>
+                <p className="text-white-600">
+                  {format(new Date(event.date), 'h:mm a')}
+                </p>
+              </div>
+            )
+          ))}
+        </div>
+        <div>
+          <h2 className="text-xl font-semibold">{format(endDate, 'MMMM d, yyyy')}</h2>
+          {eventsForBothDays?.map((event, index) => (
+            isSameDay(new Date(event.date), endDate) && (
+              <div key={index} className="border rounded p-4 mb-2">
+                <h3 className="text-sm break-words">{event.title}</h3>
+                <p className="text-white-600">
+                  {format(new Date(event.date), 'h:mm a')}
+                </p>
+              </div>
+            )
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+

src/lib/db/models/Event.ts

@@ -1,12 +1,8 @@
 import z from 'zod'
 
 export const EventSchema = z.object({
-	startTime: z.string().datetime(),
-	durationMins: z.number().positive().int(),
-	title: z.string(),
-	shortDesc: z.string(),
-	longDesc: z.string(),
-	categories: z.string().array(),
+	title 	 : z.string(),
+	date 	 : z.string().datetime()
 })
 
 export type EventModel = z.infer<typeof EventSchema>