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

web/src/app/lokaler/[slug]/page.tsx

@@ -2,27 +2,13 @@ import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import {
-  ImageSliderBlock,
-  ImageSliderBlockFragmentDefinition,
-} from "@/components/blocks/ImageSliderBlock";
-import { Breadcrumb } from "@/components/general/Breadcrumb";
-import { PageContent } from "@/components/general/PageContent";
-import { NeufMap } from "@/components/venues/NeufMap";
-import { VenueInfo } from "@/components/venues/VenueInfo";
-import { graphql, unmaskFragment } from "@/gql";
+  VenuePageView,
+  venueBySlugQuery,
+} from "@/components/venues/VenuePageView";
+import { graphql } from "@/gql";
 import { VenueFragment } from "@/gql/graphql";
 import { getSeoMetadata } from "@/lib/seo";
 
-const venueBySlugQuery = graphql(`
-  query venueBySlug($slug: String!) {
-    venue: page(contentType: "venues.VenuePage", slug: $slug) {
-      ... on VenuePage {
-        ...Venue
-      }
-    }
-  }
-`);
-
 type Params = Promise<{ slug: string }>;
 
 export async function generateMetadata(
@@ -85,26 +71,6 @@ export default async function Page({ params }: { params: Params }) {
   }
 
   const venue = data.venue as VenueFragment;
-  const featuredImage: any = venue.featuredImage;
 
-  return (
-    <main className="site-main" id="main">
-      {venue.images?.[0]?.__typename === "ImageSliderBlock" && (
-        <ImageSliderBlock
-          block={unmaskFragment(
-            ImageSliderBlockFragmentDefinition,
-            venue.images[0]
-          )}
-          hero
-        />
-      )}
-      <div className="page-header-small">
-        <Breadcrumb link="/utleie" text="Lokale" />
-        <h1 className="page-title">{venue.title}</h1>
-      </div>
-      <PageContent blocks={venue.body} />
-      <VenueInfo venue={venue} />
-      <NeufMap venueSlug={venue.slug} />
-    </main>
-  );
+  return <VenuePageView venue={venue} />;
 }