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

2026-05-19 17:00:12 +02:00
parent cf945d8647
commit 0c5a9876d6
30 changed files with 1419 additions and 1239 deletions
@@ -0,0 +1,79 @@
+import { graphql } from "@/gql";
+import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
+import { AssociationList } from "@/components/associations/AssociationList";
+import { PageHeader } from "@/components/general/PageHeader";
+import { PageContent } from "@/components/general/PageContent";
+
+const AssociationIndexDefinition = graphql(`
+  fragment AssociationIndex on AssociationIndex {
+    ... on AssociationIndex {
+      title
+      seoTitle
+      searchDescription
+      lead
+      body {
+        ...Blocks
+      }
+    }
+  }
+`);
+
+const AssociationFragmentDefinition = graphql(`
+  fragment Association on AssociationPage {
+    __typename
+    id
+    slug
+    title
+    seoTitle
+    searchDescription
+    excerpt
+    lead
+    body {
+      ...Blocks
+    }
+    logo {
+      url
+      width
+      height
+    }
+    associationType
+    websiteUrl
+  }
+`);
+
+export const allAssociationsQuery = graphql(`
+  query allAssociations {
+    index: associationIndex {
+      ... on AssociationIndex {
+        ...AssociationIndex
+      }
+    }
+    associations: pages(
+      contentType: "associations.AssociationPage"
+      limit: 1000
+    ) {
+      ... on AssociationPage {
+        ...Association
+      }
+    }
+  }
+`);
+
+export function AssociationIndexView({
+  index,
+  associations,
+}: {
+  index: AssociationIndexFragment;
+  associations: AssociationFragment[];
+}) {
+  return (
+    <main className="site-main" id="main">
+      <PageHeader heading={index.title} lead={index.lead} />
+      {index.body && <PageContent blocks={index.body} />}
+      <AssociationList
+        associations={associations}
+        heading="Foreninger og utvalg"
+      />
+    </main>
+  );
+}
@@ -0,0 +1,30 @@
+import { graphql } from "@/gql";
+import { AssociationFragment } from "@/gql/graphql";
+import { AssociationHeader } from "@/components/associations/AssociationHeader";
+import { PageContent } from "@/components/general/PageContent";
+
+export const associationBySlugQuery = graphql(`
+  query associationBySlug($slug: String!) {
+    association: page(
+      contentType: "associations.AssociationPage"
+      slug: $slug
+    ) {
+      ... on AssociationPage {
+        ...Association
+      }
+    }
+  }
+`);
+
+export function AssociationPageView({
+  association,
+}: {
+  association: AssociationFragment;
+}) {
+  return (
+    <main className="site-main" id="main">
+      <AssociationHeader association={association} />
+      <PageContent blocks={association.body} />
+    </main>
+  );
+}