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

web/src/app/[...url]/page.tsx

@@ -3,39 +3,14 @@ import { GenericFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
-import { PageHeader } from "@/components/general/PageHeader";
-import { PageContent } from "@/components/general/PageContent";
-import { BgPig } from "@/components/general/BgPig";
+import {
+  GenericPageView,
+  genericPageByUrlPathQuery,
+} from "@/components/general/GenericPageView";
 import { getSeoMetadata } from "@/lib/seo";
 
 export const dynamicParams = false;
 
-const GenericFragmentDefinition = graphql(`
-  fragment Generic on GenericPage {
-    __typename
-    id
-    urlPath
-    seoTitle
-    searchDescription
-    title
-    lead
-    pig
-    body {
-      ...Blocks
-    }
-  }
-`);
-
-const genericPageByUrlPathQuery = graphql(`
-  query genericPageByUrl($urlPath: String!) {
-    page: page(contentType: "generic.GenericPage", urlPath: $urlPath) {
-      ... on GenericPage {
-        ...Generic
-      }
-    }
-  }
-`);
-
 function getWagtailUrlPath(url: string[]): string {
   // for the page /foo/bar we need to look for `/home/foo/bar/`
   return `/home/${url.join("/")}/`;
@@ -111,13 +86,5 @@ export default async function Page({ params }: { params: Params }) {
 
   const page = data?.page as GenericFragment;
 
-  return (
-    <>
-      <main className="site-main" id="main">
-        <PageHeader heading={page.title} lead={page.lead} />
-        <PageContent blocks={page.body} />
-      </main>
-      {page.pig && <BgPig type={page.pig} color="white" />}
-    </>
-  );
+  return <GenericPageView page={page} />;
 }