add venues

web/src/components/layout/Header.tsx

@@ -26,6 +26,10 @@ export const Header = () => {
           <li>
             <Link href="/">Utleie</Link>
           </li>
+          <li>
+            {/* TODO: skal trolig ikke være så synlig ved lansering */}
+            <Link href="/lokaler">Lokaler</Link>
+          </li>
           <li>
             <Link href="/">Bli medlem</Link>
           </li>

web/src/components/venues/VenueItem.tsx

@@ -0,0 +1,29 @@
+import { VenueFragment } from "@/gql/graphql";
+import styles from "./venueItem.module.scss";
+import Link from "next/link";
+import Image from "../general/Image";
+
+export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
+  return (
+    <li className={`${styles.venueItem} linkItem`}>
+      <div className={styles.image}>
+        {venue.featuredImage && (
+          <Image
+            src={venue.featuredImage.url}
+            alt=""
+            width={0}
+            height={0}
+            sizes="20vw"
+          />
+        )}
+      </div>
+      <div className={styles.text}>
+        <h1 className={styles.title}>{venue.title}</h1>
+        <p className={styles.details}>Detaljer om lokalet</p>
+      </div>
+      <Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
+        Mer om lokalet {venue.title}
+      </Link>
+    </li>
+  );
+};

web/src/components/venues/VenueList.tsx

@@ -0,0 +1,13 @@
+import { VenueFragment } from "@/gql/graphql";
+import { VenueItem } from "./VenueItem";
+import styles from "./venueList.module.scss";
+
+export const VenueList = ({ venues }: { venues: VenueFragment[] }) => {
+  return (
+    <ul className={styles.venueList}>
+      {venues.map((venue) => (
+        <VenueItem key={venue.id} venue={venue} />
+      ))}
+    </ul>
+  );
+};

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

@@ -0,0 +1,3 @@
+.venueItem {
+    
+}

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

@@ -0,0 +1,3 @@
+.venueList {
+    
+}