change formatting of dates in event list mode

web/src/components/events/EventItem.tsx

@@ -6,10 +6,12 @@ import Image from "../general/Image";
 import {
   SingularEvent,
   EventFragment,
-  getClosestOccurrence,
+  getFutureOccurrences,
 } from "@/lib/event";
 import { formatDate, formatExtendedDateTime } from "@/lib/date";
 
+const DATES_TO_SHOW = 2;
+
 export const EventItem = ({
   event,
   mode,
@@ -19,8 +21,9 @@ export const EventItem = ({
   mode: "list" | "calendar" | "singular";
   size?: "small" | "medium" | "large";
 }) => {
-  const nextOccurrence = getClosestOccurrence(event);
+  const futureOccurrences = getFutureOccurrences(event);
   const numOccurrences = event?.occurrences?.length ?? 0;
+  const nextOccurrence = numOccurrences ? futureOccurrences[0] : null;
   const featuredImage: any = event.featuredImage;
 
   return (
@@ -43,16 +46,15 @@ export const EventItem = ({
       <div className={styles.time}>
         {mode === "list" && nextOccurrence && (
           <div className={styles.dates}>
-            {numOccurrences === 1 && nextOccurrence?.start && (
-              <span>{formatExtendedDateTime(nextOccurrence.start)}</span>
-            )}
-            {numOccurrences > 1 && nextOccurrence?.start && (
-              <>
-                <span>{formatExtendedDateTime(nextOccurrence.start)}</span>
-                <p className={styles.moreDates}>
-                  Flere datoer ({numOccurrences})
-                </p>
-              </>
+            {futureOccurrences.slice(0, DATES_TO_SHOW).map((occurrence) => (
+              <span key={occurrence.id} className={styles.datePill}>
+                {formatDate(occurrence.start, "d. MMMM")}
+              </span>
+            ))}
+            {futureOccurrences.length > DATES_TO_SHOW && (
+              <span className={styles.moreDates}>{`+${
+                futureOccurrences.length - DATES_TO_SHOW
+              }`}</span>
             )}
           </div>
         )}
@@ -60,7 +62,7 @@ export const EventItem = ({
           "occurrence" in event &&
           event.occurrence?.start && (
             <p className={styles.dates}>
-              {formatExtendedDateTime(nextOccurrence.start)}
+              {formatExtendedDateTime(event.occurrence.start)}
             </p>
           )}
         {mode === "calendar" &&

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

@@ -111,7 +111,7 @@
   align-items: center;
 }
 
-.moreDates {
+.datePill, .moreDates {
   display: inline-block;
   background: var(--color-background-secondary);
   color: var(--color-chateauBlue);