Add event metadata

apps/web/src/app/events/components/EventInfoBox.tsx

@@ -1,4 +1,5 @@
 import type { Committee, Company, Event } from "@dotkomonline/types"
+import { formatDate } from "@dotkomonline/utils"
 import Image from "next/image"
 import type { FC } from "react"
 
@@ -18,11 +19,23 @@ const mapToImageAndName = (item: Committee | Company) => (
 export const EventInfoBox: FC<Props> = ({ event, committees, companies }) => {
   const committeeList = committees.map(mapToImageAndName)
   const companyList = companies.map(mapToImageAndName)
+  // TODO - implement event organizers
+  const eventOrganizers = ["Ola", "Kari"]
+
+  const listFormat = new Intl.ListFormat("no-NB", { type: "conjunction" })
 
   return (
-    <div className="mr-10 w-full flex flex-col gap-8 md:w-[60%]">
-      <div className="flex flex-row gap-8">{[...committeeList, ...companyList]}</div>
-      <p className="bg-slate-2 p-5 text-[18px] rounded-2xl">{event.description}</p>
-    </div>
+    <section className="mr-10 w-full flex flex-col space-y-8 md:w-[60%]">
+      <section className="flex flex-row space-x-8">
+        <div className="flex flex-row space-x-4">{[...committeeList, ...companyList]}</div>
+        <div className="flex flex-row space-x-4 text-slate-9 items-center">
+          <span>Lagt ut {formatDate(event.createdAt)}</span>
+          <span>Organisert av {listFormat.format(eventOrganizers)}</span>
+        </div>
+      </section>
+      <div className="bg-slate-2 p-5 text-[18px] rounded-2xl">
+        <p>{event.description}</p>
+      </div>
+    </section>
   )
 }