start splitting up event list

web/src/app/page.tsx

@@ -1,7 +1,7 @@
 import { graphql } from "@/gql";
 import { EventFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { EventList } from "@/components/events/EventList";
+import { FeaturedEvents } from "@/components/events/FeaturedEvents";
 import { Body } from "@/components/general/Body";
 import Image from "next/image";
 import { PersonList } from "@/components/people/PersonList";
@@ -21,7 +21,7 @@ export default async function Home() {
   return (
     <main className="site-main" id="main">
       <div>
-        <EventList events={events} />
+        <FeaturedEvents events={events} />
         <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
         <NewsList />
         <div>

web/src/components/events/EventFilter.tsx

@@ -0,0 +1,20 @@
+import styles from "./eventFilter.module.scss";
+
+export const EventFilter = () => {
+  return (
+    <div className={styles.eventFilter}>
+      <span>Filter</span>
+      <ul>
+        <li>
+          <button>Kategori</button>
+        </li>
+        <li>
+          <button>Kategori</button>
+        </li>
+        <li>
+          <button>Kategori</button>
+        </li>
+      </ul>
+    </div>
+  );
+};

web/src/components/events/EventList.tsx

@@ -1,13 +1,23 @@
 import { EventFragment } from "@/gql/graphql";
 import { EventItem } from "./EventItem";
 import styles from "./eventList.module.scss";
+import { EventFilter } from "./EventFilter";
 
 export const EventList = ({ events }: { events: EventFragment[] }) => {
   return (
-    <ul className={styles.eventList}>
+    <div className={styles.events}>
-      {events.map((event) => (
+      <EventFilter />
-        <EventItem key={event.id} event={event} />
+      <div className={styles.eventWrapper}>
-      ))}
+        <div className={styles.displayOptions}>
-    </ul>
+          <button>Vis liste</button>
+          <button>Vis kalender</button>
+        </div>
+        <ul className={styles.eventList}>
+          {events.map((event) => (
+            <EventItem key={event.id} event={event} />
+          ))}
+        </ul>
+      </div>
+    </div>
   );
 };

web/src/components/events/FeaturedEvents.tsx

@@ -0,0 +1,13 @@
+import { EventFragment } from "@/gql/graphql";
+import { EventItem } from "./EventItem";
+import styles from "./featuredEvents.module.scss";
+
+export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => {
+  return (
+    <ul className={styles.eventList}>
+      {events.map((event) => (
+        <EventItem key={event.id} event={event} />
+      ))}
+    </ul>
+  );
+};

web/src/components/events/eventFilter.module.scss

@@ -0,0 +1,14 @@
+.eventFilter {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: var(--color-background-secondary);
+  margin: var(--spacing-sitepadding) calc(var(--spacing-sitepadding)*-1);
+  padding: 1rem var(--spacing-sitepadding);
+
+  ul {
+    list-style: none;
+    display: flex;
+    gap: .5rem;
+  }
+}

web/src/components/events/eventList.module.scss

@@ -1,3 +1,9 @@
+.eventWrapper {
+  background: #ccc;
+  margin: calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding);
+}
+
 .eventList {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -5,3 +11,14 @@
   row-gap: var(--spacing-gap-row);
   padding-bottom: var(--spacing-section-bottom);
 }
+
+.displayOptions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-gap-column);
+  margin-bottom: var(--spacing-sitepadding);
+
+  button {
+    border-radius: 0;
+  }
+}

web/src/components/events/featuredEvents.module.scss

@@ -0,0 +1,7 @@
+.eventList {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  padding-bottom: var(--spacing-section-bottom);
+}

web/src/css/base.scss

@@ -85,7 +85,7 @@ button {
   background: var(--color-cta);
   color: var(--color-text);
   border: none;
-  padding: 1rem 1.5rem;
+  padding: .5rem 1rem;
   font-family: inherit;
   font-size: var(--font-size-body);
   font-weight: 500;