add upcoming events component

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>
+  );
+};

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 {

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;
+  }
+}