start splitting up event list

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}>
-      {events.map((event) => (
-        <EventItem key={event.id} event={event} />
-      ))}
-    </ul>
+    <div className={styles.events}>
+      <EventFilter />
+      <div className={styles.eventWrapper}>
+        <div className={styles.displayOptions}>
+          <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,7 +1,24 @@
+.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);
   column-gap: var(--spacing-gap-column);
   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);
+}