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

web/src/components/venues/VenueIndexView.tsx

@@ -0,0 +1,88 @@
+import { graphql } from "@/gql";
+import { VenueFragment, VenueIndexFragment } from "@/gql/graphql";
+import { PageContent } from "@/components/general/PageContent";
+import { PageHeader } from "@/components/general/PageHeader";
+import { VenueList } from "@/components/venues/VenueList";
+
+const VenueIndexDefinition = graphql(`
+  fragment VenueIndex on VenueIndex {
+    ... on VenueIndex {
+      title
+      seoTitle
+      searchDescription
+      lead
+      body {
+        ...Blocks
+      }
+    }
+  }
+`);
+
+const VenueFragmentDefinition = graphql(`
+  fragment Venue on VenuePage {
+    __typename
+    id
+    slug
+    title
+    seoTitle
+    searchDescription
+    images {
+      __typename
+      ... on ImageSliderBlock {
+        ...ImageSliderBlock
+      }
+    }
+    body {
+      ...Blocks
+    }
+    featuredImage {
+      ...Image
+    }
+    showAsBookable
+    showInOverview
+    floor
+    preposition
+    usedFor
+    techSpecsUrl
+    capabilityAudio
+    capabilityAudioVideo
+    capabilityBar
+    capabilityLighting
+    capacityLegal
+    capacityStanding
+    capacitySitting
+  }
+`);
+
+export const venueIndexQuery = graphql(`
+  query venueIndex {
+    index: venueIndex {
+      ... on VenueIndex {
+        ...VenueIndex
+      }
+    }
+    venues: pages(contentType: "venues.VenuePage", limit: 100) {
+      ... on VenuePage {
+        ...Venue
+      }
+    }
+  }
+`);
+
+export function VenueIndexView({
+  index,
+  venues,
+}: {
+  index: VenueIndexFragment;
+  venues: VenueFragment[];
+}) {
+  const visibleVenues = venues.filter((x) => x.showInOverview);
+
+  return (
+    <main className="site-main" id="main">
+      <PageHeader heading={index.title} lead={index.lead} />
+      <PageContent blocks={index.body} />
+      <VenueList venues={visibleVenues} />
+    </main>
+  );
+}