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>
+  );
+};