add event header component and the first pig

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

@@ -3,6 +3,7 @@ import { EventFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import Image from "@/components/general/Image";
+import { EventHeader } from "@/components/events/EventHeader";
 
 export async function generateStaticParams() {
   const allEventSlugsQuery = graphql(`
@@ -39,25 +40,9 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <main className="site-main" id="main">
-      <section className="page-header">
-        <h1>{event.title}</h1>
-        {event.featuredImage && (
-          <Image
-            src={event.featuredImage.url}
-            alt=""
-            width={event.featuredImage.width}
-            height={event.featuredImage.height}
-            sizes="100vw"
-          />
-        )}
-      </section>
+      <EventHeader event={event} />
       <section className="page-content">
         <Blocks blocks={event.body} />
-        <div>Facebook: {event.facebookUrl}</div>
-        <div>Billettlenke: {event.ticketUrl}</div>
-        <div>Ordinær pris: {event.priceRegular}</div>
-        <div>Studentpris: {event.priceStudent}</div>
-        <div>Medlemspris: {event.priceMember}</div>
       </section>
     </main>
   );