add upcoming events component

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" />

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

web/src/css/variables.scss

@@ -40,4 +40,6 @@
 
   // animations
   --transition-easing: .3s ease;
+
+  --border: 1px solid var(--color-neufPink);
 }