add venue map and style tables and make a placeholder image gallery

web/src/components/venues/NeufMap.tsx

@@ -0,0 +1,24 @@
+import styles from "./neufMap.module.scss";
+
+export const NeufMap = ({ venueSlug }: { venueSlug: string }) => {
+  return (
+    <section className={styles.neufMap}>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>Kjeller</span>
+        <img src="/assets/graphics/map/kjeller.svg" />
+      </div>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>1. etasje</span>
+        <img src="/assets/graphics/map/etg1.svg" />
+      </div>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>2. etasje</span>
+        <img src="/assets/graphics/map/etg2.svg" />
+      </div>
+      <div className={styles.floorItem}>
+        <span className={styles.floorHeading}>3. etasje</span>
+        <img src="/assets/graphics/map/etg3.svg" />
+      </div>
+    </section>
+  );
+};

web/src/components/venues/VenueInfo.tsx

@@ -0,0 +1,51 @@
+import { VenueFragment } from "@/gql/graphql";
+import styles from "./venueInfo.module.scss";
+import Link from "next/link";
+import Image from "../general/Image";
+
+export const VenueInfo = ({ venue }: { venue: VenueFragment }) => {
+  return (
+    <div className={styles.venueInfo}>
+      <table>
+        <tbody>
+          <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>
+        </tbody>
+      </table>
+    </div>
+  );
+};

web/src/components/venues/VenueItem.tsx

@@ -21,7 +21,15 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
       </div>
       <div className={styles.text}>
         <h1 className={styles.title}>{venue.title}</h1>
-        <p className={styles.details}>Detaljer om lokalet</p>
+        <div className={styles.details}>
+          Egner seg for:
+          <br />
+          <span className={styles.people}>50—115 personer</span>
+          <br />
+          <span className={styles.uses}>
+            Konsert, foredrag, fest, debatt, teater, filmvisning
+          </span>
+        </div>
       </div>
       <Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
         Mer om lokalet {venue.title}

web/src/components/venues/neufMap.module.scss

@@ -0,0 +1,13 @@
+.neufMap {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-sitepadding);
+  width: 100%;
+  max-width: 1000px;
+  margin: var(--spacing-xl) auto;
+}
+
+.floorHeading {
+  color: var(--color-deepBrick);
+  font-weight: 600;
+}

web/src/components/venues/venueInfo.module.scss

@@ -0,0 +1,27 @@
+.venueInfo {
+  max-width: var(--size-width-p);
+  margin: 1rem auto 2rem;
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  tr {
+    border-bottom: var(--border);
+  }
+
+  th {
+    text-align: left;
+    width: 11rem;
+  }
+
+  th,
+  td {
+    padding: .5rem 0;
+  }
+
+  td {
+    //font-family: var(--font-serif);
+  }
+}