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

web/src/app/kontakt/page.tsx

@@ -1,37 +1,13 @@
 import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
-import { graphql } from "@/gql";
 import { ContactIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { PageHeader } from "@/components/general/PageHeader";
-import { PageContent } from "@/components/general/PageContent";
-import { GeneralContactBlock } from "@/components/blocks/GeneralContactBlock";
+import {
+  ContactIndexView,
+  contactQuery,
+} from "@/components/contact/ContactIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
-const contactQuery = graphql(`
-  query contacts {
-    index: contactIndex {
-      ... on ContactIndex {
-        ...ContactIndex
-      }
-    }
-  }
-`);
-
-const ContactIndexDefinition = graphql(`
-  fragment ContactIndex on ContactIndex {
-    ... on ContactIndex {
-      title
-      seoTitle
-      searchDescription
-      lead
-      body {
-        ...Blocks
-      }
-    }
-  }
-`);
-
 export async function generateMetadata(
   { params }: { params: Promise<{}> },
   parent: ResolvingMetadata
@@ -62,11 +38,5 @@ export default async function Page() {
 
   const index = data.index as ContactIndexFragment;
 
-  return (
-    <main className="site-main" id="main">
-      <PageHeader heading={index.title} lead={index.lead} />
-      <GeneralContactBlock />
-      {index.body && <PageContent blocks={index.body} />}
-    </main>
-  );
+  return <ContactIndexView index={index} />;
 }