From af8c952a87cca83d84c19273a6349dd7490985de Mon Sep 17 00:00:00 2001
From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Thu, 19 May 2022 01:10:43 -0700
Subject: [PATCH] Attempt number 1 at _Recent Events_ UI

---
 src/routes/events/index.svelte | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/routes/events/index.svelte b/src/routes/events/index.svelte
index 4a6ec7948..d300e1d0a 100644
--- a/src/routes/events/index.svelte
+++ b/src/routes/events/index.svelte
@@ -15,6 +15,17 @@
   import AcmEmpty from '$lib/components/utils/acm-empty.svelte';
 
   export let events: AcmEvent[] = [];
+
+  let unpinnedEvents: AcmEvent[] = [];
+  let pinnedEvents: AcmEvent[] = [];
+
+  $: {
+    [unpinnedEvents, pinnedEvents] = [[], []];
+    events.forEach((event) => {
+      if (event.hasEnded && event.isPinned) pinnedEvents.push(event);
+      else unpinnedEvents.push(event);
+    });
+  }
 </script>
 
 <svelte:head>
@@ -45,7 +56,7 @@
 <Spacing --med="16px" />
 
 {#if events.length > 0}
-  <EventCarousel {events} />
+  <EventCarousel events={unpinnedEvents} />
 {:else}
   <AcmEmpty>
     <p slot="content">There are no events scheduled!</p>
@@ -54,6 +65,23 @@
 
 <Spacing --min="8px" --med="63px" --max="88px" />
 
+<div class="main-header">
+  <h2 class="size-lg headers">Recent Events</h2>
+  <img src="assets/bluecalender.svg" alt="Blue Calender" />
+</div>
+
+<Spacing --med="16px" />
+
+{#if events.length > 0}
+  <EventCarousel events={pinnedEvents} />
+{:else}
+  <AcmEmpty>
+    <p slot="content">There are no recent events posted!</p>
+  </AcmEmpty>
+{/if}
+
+<Spacing --min="8px" --med="63px" --max="88px" />
+
 <style lang="scss">
   .main-header {
     display: flex;