add date list component

web/src/app/arrangementer/[slug]/page.tsx

@@ -4,6 +4,7 @@ import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import Image from "@/components/general/Image";
 import { EventHeader } from "@/components/events/EventHeader";
+import { DateList } from "@/components/events/DateList";
 
 export async function generateStaticParams() {
   const allEventSlugsQuery = graphql(`
@@ -46,6 +47,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
     <main className="site-main" id="main">
       <EventHeader event={event} />
       <section className="page-content">
+        <DateList />
         <Blocks blocks={event.body} />
       </section>
     </main>

web/src/components/events/DateList.tsx

@@ -0,0 +1,38 @@
+import styles from "./dateList.module.scss";
+
+export const DateList = () => {
+  return (
+    <div className={styles.dateWrapper}>
+      <h2>Kommende datoer</h2>
+      <ul className={styles.dateList}>
+        <li className={styles.date}>
+          <div className={styles.time}>
+            <span>27. mai 2024</span>
+            <span>18.00</span>
+          </div>
+          <div className={styles.venue}>
+            <span>Lokale</span>
+          </div>
+        </li>
+        <li className={styles.date}>
+          <div className={styles.time}>
+            <span>27. mai 2024</span>
+            <span>18.00</span>
+          </div>
+          <div className={styles.venue}>
+            <span>Lokale</span>
+          </div>
+        </li>
+        <li className={styles.date}>
+          <div className={styles.time}>
+            <span>27. mai 2024</span>
+            <span>18.00</span>
+          </div>
+          <div className={styles.venue}>
+            <span>Lokale</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+};

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

@@ -0,0 +1,8 @@
+.dateList {
+  list-style: none;
+  margin-bottom: var(--spacing-sitepadding);
+}
+
+.date {
+  background: var(--color-goldenBeige);
+}