web: move page rendering logic from page.tsx to components

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

@@ -1,25 +1,14 @@
 import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
-import { EventDetails } from "@/components/events/EventDetails";
-import { EventHeader } from "@/components/events/EventHeader";
-import { BgPig } from "@/components/general/BgPig";
-import { PageContent } from "@/components/general/PageContent";
+import {
+  EventPageView,
+  eventBySlugQuery,
+} from "@/components/events/EventPageView";
 import { graphql } from "@/gql";
 import { EventFragment } from "@/gql/graphql";
-import { getEventPig } from "@/lib/event";
 import { getSeoMetadata } from "@/lib/seo";
 
-const eventBySlugQuery = graphql(`
-  query eventBySlug($slug: String!) {
-    event: page(contentType: "events.EventPage", slug: $slug) {
-      ... on EventPage {
-        ...Event
-      }
-    }
-  }
-`);
-
 export async function generateStaticParams() {
   const allEventSlugsQuery = graphql(`
     query allEventSlugs {
@@ -82,22 +71,6 @@ export default async function Page({ params }: { params: Params }) {
   }
 
   const event = data.event as EventFragment;
-  const eventPig = getEventPig(event);
 
-  return (
-    <>
-      <main className="site-main" id="main">
-        <EventHeader event={event} />
-        <EventDetails event={event} />
-        {event.lead && (
-          <div
-            className="lead event-lead"
-            dangerouslySetInnerHTML={{ __html: event.lead }}
-          />
-        )}
-        <PageContent blocks={event.body} />
-      </main>
-      {eventPig && <BgPig type={eventPig} color="white" />}
-    </>
-  );
+  return <EventPageView event={event} />;
 }