add some date handling

web/src/components/events/EventItem.tsx

@@ -1,9 +1,16 @@
-import { SingularEvent } from "@/app/arrangementer/page";
+"use client";
+
 import styles from "./eventItem.module.scss";
 import Link from "next/link";
 import Image from "../general/Image";
+import { SingularEvent, EventFragment } from "@/lib/event";
+import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
 
-export const EventItem = ({ event }: { event: SingularEvent }) => {
+export const EventItem = ({
+  event,
+}: {
+  event: SingularEvent | EventFragment;
+}) => {
   return (
     <li className={`${styles.eventItem} linkItem`}>
       <div className={styles.image}>
@@ -19,7 +26,11 @@ export const EventItem = ({ event }: { event: SingularEvent }) => {
       </div>
       <div className={styles.text}>
         <h1 className={styles.title}>{event.title}</h1>
-        {event.occurrence && <p className={styles.details}>{event.occurrence.start}</p>}
+        {event.occurrence?.start && (
+          <p className={styles.details}>
+            {formatDate(event.occurrence?.start, commonDateFormat)}
+          </p>
+        )}
       </div>
       <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
         Mer om arrangementet {event.title}