add venues

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

@@ -0,0 +1,97 @@
+import { graphql } from "@/gql";
+import { VenueFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
+import { Blocks } from "@/components/blocks/Blocks";
+import Image from "@/components/general/Image";
+
+export async function generateStaticParams() {
+  const allVenueSlugsQuery = graphql(`
+    query allVenueSlugs {
+      pages(contentType: "venues.VenuePage") {
+        id
+        slug
+      }
+    }
+  `);
+  const { data } = await getClient().query(allVenueSlugsQuery);
+
+  return data?.pages.map((page: any) => ({
+    slug: page.slug,
+  }));
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const venueBySlugQuery = graphql(`
+    query venueBySlug($slug: String!) {
+      venue: page(contentType: "venues.VenuePage", slug: $slug) {
+        ... on VenuePage {
+          ...Venue
+        }
+      }
+    }
+  `);
+
+  const { data, error } = await getClient().query(venueBySlugQuery, {
+    slug: params.slug,
+  });
+
+  const venue = (data?.venue ?? {}) as VenueFragment;
+
+  return (
+    <main className="site-main" id="main">
+      <section className="page-header">
+        <h1>{venue.title}</h1>
+        {venue.featuredImage && (
+          <Image
+            src={venue.featuredImage.url}
+            alt=""
+            width={venue.featuredImage.width}
+            height={venue.featuredImage.height}
+            sizes="100vw"
+          />
+        )}
+      </section>
+      <section className="page-content">
+        <Blocks blocks={venue.body} />
+        <table>
+          <tr>
+            <th>Etasje</th>
+            <td>{venue.floor}</td>
+          </tr>
+          <tr>
+            <th>Branntillatelse for</th>
+            <td>{venue.capacityLegal}</td>
+          </tr>
+          <tr>
+            <th>Stående</th>
+            <td>{venue.capacityStanding}</td>
+          </tr>
+          <tr>
+            <th>Sittende</th>
+            <td>{venue.capacitySitting}</td>
+          </tr>
+          <tr>
+            <th>Bruk</th>
+            <td>TODO</td>
+          </tr>
+          <tr>
+            <th>Bar</th>
+            <td>{venue.capabilityBar}</td>
+          </tr>
+          <tr>
+            <th>Lyd</th>
+            <td>{venue.capabilityLighting}</td>
+          </tr>
+          <tr>
+            <th>Lys</th>
+            <td>{venue.capabilityLighting}</td>
+          </tr>
+          <tr>
+            <th>A/V</th>
+            <td>{venue.capabilityAudioVideo}</td>
+          </tr>
+        </table>
+      </section>
+    </main>
+  );
+}