start association components

web/src/components/associations/AssociationItem.tsx

@@ -0,0 +1,32 @@
+import { AssociationFragment } from "@/gql/graphql";
+import styles from "./associationItem.module.scss";
+import Link from "next/link";
+import Image from "../general/Image";
+
+export const AssociationItem = ({
+  association,
+}: {
+  association: AssociationFragment;
+}) => {
+  return (
+    <li className={`${styles.associationItem} linkItem`}>
+      <div className={styles.image}>
+        {association.featuredImage && (
+          <Image
+            src={association.featuredImage.url}
+            alt=""
+            width={0}
+            height={0}
+            sizes="20vw"
+          />
+        )}
+      </div>
+      <div className={styles.text}>
+        <h1 className={styles.title}>{association.title}</h1>
+      </div>
+      <Link href={`/foreninger/${association.slug}`} className="hiddenLink">
+        Mer om {association.title}
+      </Link>
+    </li>
+  );
+};

web/src/components/associations/AssociationList.tsx

@@ -0,0 +1,17 @@
+import { AssociationFragment } from "@/gql/graphql";
+import { AssociationItem } from "./AssociationItem";
+import styles from "./associationList.module.scss";
+
+export const AssociationList = ({
+  associations,
+}: {
+  associations: AssociationFragment[];
+}) => {
+  return (
+    <ul className={styles.associationList}>
+      {associations.map((association) => (
+        <AssociationItem key={association.id} association={association} />
+      ))}
+    </ul>
+  );
+};

web/src/components/associations/associationItem.module.scss

@@ -0,0 +1,32 @@
+.venueItem {
+  position: relative;
+  list-style: none;
+}
+
+.image {
+  width: 100%;
+  padding-top: 60%;
+  background: var(--color-placeholder);
+  position: relative;
+
+  img {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.text {
+  padding: .8rem 0;
+}
+
+.title,
+.details {
+  font-size: 1.6rem;
+}
+
+.details {
+  font-family: var(--font-serif);
+}

web/src/components/associations/associationList.module.scss

@@ -0,0 +1,7 @@
+.associationList {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  padding-bottom: var(--spacing-section-bottom);
+}