Create the upcoming events component

astro/src/components/web/UpcomingEvents.astro

@@ -0,0 +1,41 @@
+---
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { Image } from 'astro:assets';
+
+interface Props {
+    upcomingEvents: UpcomingEventsComponent;
+}
+
+const upcomingEvents = Astro.props.upcomingEvents;
+---
+
+<div id={`upcomingevents-${upcomingEvents.id}`} class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18">
+    <h1 class="text-5xl font-bold">Upcoming Events</h1>
+    
+    <div class="flex flex-col items-start gap-7 w-full">
+        { upcomingEvents.events.map((event) => (
+            <div id={event.id} class="flex flex-row items-center justify-center gap-y-8 gap-x-18">
+                <div class="lg:w-[40%] w-full">
+                    <Image
+                        src={event.thumbnail.url}
+                        width={event.thumbnail.width}
+                        height={event.thumbnail.height}
+                        class={`aspect-15/9 rounded-2xl shadow-sm object-cover`}
+                        alt=""
+                    />
+                </div>
+                <div class="flex flex-col gap-1.5 lg:w-[40%] w-full">
+                    <h3 class="text-3xl font-semibold">{event.title}</h3>
+                    <div class="flex flex-row items-center gap-1.5 text-neutral-900">
+                        <CalendarIcon width={24} height={24} />
+                        { event.endDate !== null ? (
+                        <p>{event.startDate} - {event.endDate}</p>
+                        ) : (
+                            <p>{event.startDate}</p>
+                        ) }
+                    </div>
+                </div>
+            </div>
+        )) }
+    </div>
+</div>

astro/src/components/webpage/Webpage.astro

@@ -1,6 +1,7 @@
 ---
 import Hero from '../web/Hero.astro';
 import TextWithImage from '../web/TextWithImage.astro';
+import UpcomingEvents from '../web/UpcomingEvents.astro';
 import WallOfText from '../web/WallOfText.astro';
 
 interface Props {
@@ -18,6 +19,7 @@ console.log(Astro.props.webpage);
             { component.component === "Hero" && <Hero hero={component} /> }
             { component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
             { component.component === "WallOfText" && <WallOfText wallOfText={component} /> }
+            { component.component === "UpcomingEvents" && <UpcomingEvents upcomingEvents={component} /> }
         </Fragment>
     )) }
 </div>

astro/src/content/pages/pages.ts

@@ -118,6 +118,11 @@ export function dataToPage(pageRecord: any): WebPage {
                             eventRecord["map_location"]["coordinates"][1],
                             eventRecord["map_location"]["coordinates"][0]
                         ],
+                        thumbnail: {
+                            url: getImageUrl(eventRecord["thumbnail"]["filename_disk"]),
+                            width: eventRecord["thumbnail"]["width"],
+                            height: eventRecord["thumbnail"]["height"]
+                        },
                         startDate: eventRecord["start_date"],
                         endDate: eventRecord["end_date"]
                     });

astro/src/graphql/pages/getAllPages.graphql

@@ -112,7 +112,14 @@ query getAllPages($date: String!) {
                         location,
                         map_location,
                         start_date,
-                        end_date
+                        end_date,
+                        thumbnail {
+                            id,
+                            created_on,
+                            filename_disk,
+                            width,
+                            height
+                        }
                     }
                 }
 

astro/src/graphql/pages/getPage.graphql

@@ -112,7 +112,14 @@ query getAllPages($date: String!, $route: String!) {
                         location,
                         map_location,
                         start_date,
-                        end_date
+                        end_date,
+                        thumbnail {
+                            id,
+                            created_on,
+                            filename_disk,
+                            width,
+                            height
+                        }
                     }
                 }
 

astro/src/icons/CalendarIcon.astro

@@ -0,0 +1,8 @@
+---
+interface Props {
+    width?: number;
+    height?: number;
+}
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.width ?? "24"} height={Astro.props.height ?? "24"} viewBox="0 0 512 512"><rect width="416" height="384" x="48" y="80" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" rx="48"/><circle cx="296" cy="232" r="24" fill="currentColor"/><circle cx="376" cy="232" r="24" fill="currentColor"/><circle cx="296" cy="312" r="24" fill="currentColor"/><circle cx="376" cy="312" r="24" fill="currentColor"/><circle cx="136" cy="312" r="24" fill="currentColor"/><circle cx="216" cy="312" r="24" fill="currentColor"/><circle cx="136" cy="392" r="24" fill="currentColor"/><circle cx="216" cy="392" r="24" fill="currentColor"/><circle cx="296" cy="392" r="24" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M128 48v32m256-32v32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M464 160H48"/></svg>

astro/src/types/components/events.d.ts

@@ -15,4 +15,5 @@ type UpcomingEvent = {
     mapLocation: [number, number];
     startDate: Date;
     endDate: Date;
+    thumbnail: PhotoProps; 
 }