improve event organizer selection, show on web

web/src/components/events/EventHeader.tsx

@@ -3,6 +3,7 @@ import styles from "./eventHeader.module.scss";
 import Image from "@/components/general/Image";
 import { Pig } from "../general/Pig";
 import Link from "next/link";
+import { OrganizerList } from "./OrganizerList";
 
 function formatPrice(price: number): string {
   if (price === null) {
@@ -70,6 +71,7 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
               Kategorier: {event.categories.map((x) => x.name).join(", ")}
             </div>
           )}
+          {event.organizers && <OrganizerList event={event} />}
         </div>
       </div>
       <div className={styles.image}>

web/src/components/events/OrganizerList.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+import { formatDate, isTodayOrFuture } from "@/lib/date";
+import { EventFragment, EventOrganizer } from "@/lib/event";
+import styles from "./organizerList.module.scss";
+import Link from "next/link";
+
+export const OrganizerList = ({ event }: { event: EventFragment }) => {
+  return (
+    <div>
+      <h2>Arrangeres av</h2>
+      <ul>
+        {event.organizers.map((organizer) => {
+          const url =
+            organizer.association?.url ?? organizer.externalUrl ?? null;
+          if (typeof url === "string" && url.startsWith("http")) {
+            return (
+              <li key={organizer.name}>
+                <Link href={url}>{organizer.name}</Link>
+              </li>
+            );
+          }
+          return <li key={organizer.name}>{organizer.name}</li>;
+        })}
+      </ul>
+    </div>
+  );
+};