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

web/src/app/utleie/page.tsx

@@ -1,42 +1,12 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { graphql } from "@/gql";
 import { VenueFragment, VenueRentalIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { VenueList } from "@/components/venues/VenueList";
-import { PageHeader } from "@/components/general/PageHeader";
-import { BgPig } from "@/components/general/BgPig";
-import { PageContent } from "@/components/general/PageContent";
+import {
+  VenueRentalIndexView,
+  venueRentalIndexQuery,
+} from "@/components/venues/VenueRentalIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
-const venueRentalIndexQuery = graphql(`
-  query venueRentalIndex {
-    index: venueRentalIndex {
-      ... on VenueRentalIndex {
-        ...VenueRentalIndex
-      }
-    }
-    venues: pages(contentType: "venues.VenuePage", limit: 100) {
-      ... on VenuePage {
-        ...Venue
-      }
-    }
-  }
-`);
-
-const VenueRentalIndexDefinition = graphql(`
-  fragment VenueRentalIndex on VenueRentalIndex {
-    ... on VenueRentalIndex {
-      title
-      seoTitle
-      searchDescription
-      lead
-      body {
-        ...Blocks
-      }
-    }
-  }
-`);
-
 export async function generateMetadata(
   { params }: { params: Promise<{}> },
   parent: ResolvingMetadata
@@ -67,16 +37,6 @@ export default async function Page() {
 
   const index = data.index as VenueRentalIndexFragment;
   const venues = (data?.venues ?? []) as VenueFragment[];
-  const bookableVenues = venues.filter((venue) => venue.showAsBookable);
 
-  return (
-    <>
-      <main className="site-main" id="main">
-        <PageHeader heading={index.title} lead={index.lead} />
-        {index.body && <PageContent blocks={index.body} />}
-        <VenueList venues={bookableVenues} heading="Våre lokaler" />
-      </main>
-      <BgPig type="key" />
-    </>
-  );
+  return <VenueRentalIndexView index={index} venues={venues} />;
 }