From 29cff800db3fb250f0ce16422d4a95a427965cd6 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 13 May 2024 01:58:35 +0200
Subject: [PATCH] add upcoming events component

---
 web/src/app/page.tsx                          |  2 ++
 web/src/components/events/UpcomingEvents.tsx  | 20 ++++++++++++++++++
 .../components/events/eventItem.module.scss   | 11 ++++++++++
 .../events/upcomingEvents.module.scss         | 21 +++++++++++++++++++
 web/src/css/variables.scss                    |  2 ++
 5 files changed, 56 insertions(+)
 create mode 100644 web/src/components/events/UpcomingEvents.tsx
 create mode 100644 web/src/components/events/upcomingEvents.module.scss

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index ba5c4f1..78ef484 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -7,6 +7,7 @@ import Image from "next/image";
 import { PersonList } from "@/components/people/PersonList";
 import { NewsList } from "@/components/news/NewsList";
 import { PersonSection } from "@/components/people/PersonSection";
+import { UpcomingEvents } from "@/components/events/UpcomingEvents";
 
 export default async function Home() {
   const homeQuery = graphql(`
@@ -23,6 +24,7 @@ export default async function Home() {
     <main className="site-main" id="main">
       <div>
         <FeaturedEvents events={events} />
+        <UpcomingEvents events={events} />
         <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
         <PersonSection heading="Styret" />
         <PersonSection heading="Administrasjonen" />
diff --git a/web/src/components/events/UpcomingEvents.tsx b/web/src/components/events/UpcomingEvents.tsx
new file mode 100644
index 0000000..8399531
--- /dev/null
+++ b/web/src/components/events/UpcomingEvents.tsx
@@ -0,0 +1,20 @@
+import { EventFragment } from "@/gql/graphql";
+import { EventItem } from "./EventItem";
+import styles from "./upcomingEvents.module.scss";
+import Link from "next/link";
+
+export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
+  return (
+    <section className={styles.upcomingWrapper}>
+      <h2 className="suphead">Denne uka på Chateau Neuf</h2>
+      <ul className={styles.eventList}>
+        {events.map((event) => (
+          <EventItem key={event.id} event={event} mode="list" size="medium" />
+        ))}
+        <li>
+          <Link href="/arrangementer">Vis kalender &rarr;</Link>
+        </li>
+      </ul>
+    </section>
+  );
+};
diff --git a/web/src/components/events/eventItem.module.scss b/web/src/components/events/eventItem.module.scss
index c6e751d..447422a 100644
--- a/web/src/components/events/eventItem.module.scss
+++ b/web/src/components/events/eventItem.module.scss
@@ -9,6 +9,17 @@
       font-size: 1rem;
     }
   }
+
+  &.medium {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    column-gap: .6rem;
+
+    .title,
+    .details {
+      font-size: 1rem;
+    }
+  }
 }
 
 .image {
diff --git a/web/src/components/events/upcomingEvents.module.scss b/web/src/components/events/upcomingEvents.module.scss
new file mode 100644
index 0000000..3a87983
--- /dev/null
+++ b/web/src/components/events/upcomingEvents.module.scss
@@ -0,0 +1,21 @@
+.upcomingWrapper {
+  background: var(--color-deepBrick);
+  color: var(--color-betongGray);
+  margin: 0 calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+}
+
+.eventList {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  list-style: none;
+
+  li {
+    border-right: var(--border);
+    margin-right: .6rem;
+  }
+}
\ No newline at end of file
diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss
index cb25112..5388ca2 100644
--- a/web/src/css/variables.scss
+++ b/web/src/css/variables.scss
@@ -40,4 +40,6 @@
 
   // animations
   --transition-easing: .3s ease;
+
+  --border: 1px solid var(--color-neufPink);
 }
\ No newline at end of file