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

web/src/app/studio/page.tsx

@@ -1,43 +1,12 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { graphql } from "@/gql";
 import { type StudioFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { PageContent } from "@/components/general/PageContent";
-import { BgPig } from "@/components/general/BgPig";
-import { StudioHeader } from "@/components/studio/StudioHeader";
+import {
+  StudioPageView,
+  studioPageQuery,
+} from "@/components/studio/StudioPageView";
 import { getSeoMetadata } from "@/lib/seo";
 
-const StudioFragmentDefinition = graphql(`
-  fragment Studio on StudioPage {
-    __typename
-    id
-    title
-    seoTitle
-    searchDescription
-    lead
-    pig
-    logo {
-      url
-      width
-      height
-      alt
-    }
-    body {
-      ...Blocks
-    }
-  }
-`);
-
-const studioPageQuery = graphql(`
-  query studio {
-    page: studioPage {
-      ... on StudioPage {
-        ...Studio
-      }
-    }
-  }
-`);
-
 export async function generateMetadata(
   { params }: { params: Promise<{}> },
   parent: ResolvingMetadata
@@ -68,13 +37,5 @@ export default async function Page() {
 
   const page = data.page as StudioFragment;
 
-  return (
-    <>
-      <main className="site-main" id="main">
-        <StudioHeader title={page.title} lead={page.lead} />
-        {page.body && <PageContent blocks={page.body} />}
-      </main>
-      {page.pig && <BgPig type={page.pig} color="white" />}
-    </>
-  );
+  return <StudioPageView page={page} />;
 }