From 99ad732a1ea1fb7d326eb72d6a993bfbd106139f Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Fri, 9 Aug 2024 17:02:37 +0200
Subject: [PATCH] add component for associationheader, misc association design
 adjustments

---
 web/src/app/foreninger/[slug]/page.tsx        | 25 ++-----------
 .../associations/AssociationHeader.tsx        | 36 +++++++++++++++++++
 .../associations/AssociationItem.tsx          |  8 ++---
 .../associationHeader.module.scss             | 27 ++++++++++++++
 4 files changed, 69 insertions(+), 27 deletions(-)
 create mode 100644 web/src/components/associations/AssociationHeader.tsx
 create mode 100644 web/src/components/associations/associationHeader.module.scss

diff --git a/web/src/app/foreninger/[slug]/page.tsx b/web/src/app/foreninger/[slug]/page.tsx
index 2fd546b..c11bed3 100644
--- a/web/src/app/foreninger/[slug]/page.tsx
+++ b/web/src/app/foreninger/[slug]/page.tsx
@@ -1,11 +1,8 @@
 import { getClient } from "@/app/client";
-import { Breadcrumb } from "@/components/general/Breadcrumb";
-import Icon from "@/components/general/Icon";
-import { Image } from "@/components/general/Image";
+import { AssociationHeader } from "@/components/associations/AssociationHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 
 export async function generateStaticParams() {
@@ -54,25 +51,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <main className="site-main" id="main">
-      <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
-      <section className="page-header">
-        <h1>{association.title}</h1>
-        {association.websiteUrl && (
-          <a className="button" href={association.websiteUrl} target="_blank">
-            <span>Besøk nettside</span>
-            <Icon type="externalLink" />
-          </a>
-        )}
-        {association.logo && (
-          <Image
-            src={association.logo.url}
-            alt={`Logoen til ${association.title}`}
-            width={association.logo.width}
-            height={association.logo.height}
-            sizes="100vw"
-          />
-        )}
-      </section>
+      <AssociationHeader association={association} />
       {association.lead && (
           <div
             className="lead"
diff --git a/web/src/components/associations/AssociationHeader.tsx b/web/src/components/associations/AssociationHeader.tsx
new file mode 100644
index 0000000..095ee9f
--- /dev/null
+++ b/web/src/components/associations/AssociationHeader.tsx
@@ -0,0 +1,36 @@
+import { AssociationFragment } from "@/gql/graphql";
+import { Image } from "@/components/general/Image";
+import styles from './associationHeader.module.scss';
+import { Breadcrumb } from "../general/Breadcrumb";
+import Icon from "../general/Icon";
+
+export const AssociationHeader = ({
+  association,
+}: {
+  association: AssociationFragment;
+}) => {
+  return (
+    <section className={`${styles.associationHeader} ${association.logo && styles.hasLogo}`}>
+      <div>
+          <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
+          <h1>{association.title}</h1>
+          {association.websiteUrl && (
+            <a className="button" href={association.websiteUrl} target="_blank">
+              <span>Besøk nettside</span>
+              <Icon type="externalLink" />
+            </a>
+          )}
+        </div>
+        {association.logo && (
+          <Image
+            src={association.logo.url}
+            alt={`Logoen til ${association.title}`}
+            width={association.logo.width}
+            height={association.logo.height}
+            sizes="100vw"
+            className={styles.logo}
+          />
+        )}
+    </section>
+  );
+};
diff --git a/web/src/components/associations/AssociationItem.tsx b/web/src/components/associations/AssociationItem.tsx
index d64305f..200e4c4 100644
--- a/web/src/components/associations/AssociationItem.tsx
+++ b/web/src/components/associations/AssociationItem.tsx
@@ -10,8 +10,8 @@ export const AssociationItem = ({
 }) => {
   return (
     <li className={`${styles.associationItem} linkItem`}>
-      <div className={styles.image}>
-        {association.logo && (
+      {association.logo && (
+        <div className={styles.image}>
           <Image
             src={association.logo.url}
             alt={`Logoen til ${association.title}`}
@@ -19,8 +19,8 @@ export const AssociationItem = ({
             height={0}
             sizes="20vw"
           />
-        )}
-      </div>
+        </div>
+      )}
       <div className={styles.text}>
         <h1 className={styles.title}>{association.title}</h1>
         {association.excerpt && (
diff --git a/web/src/components/associations/associationHeader.module.scss b/web/src/components/associations/associationHeader.module.scss
new file mode 100644
index 0000000..4c763bf
--- /dev/null
+++ b/web/src/components/associations/associationHeader.module.scss
@@ -0,0 +1,27 @@
+.associationHeader {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+  max-width: var(--size-width-p);
+  margin: 0 auto var(--spacing-section-bottom);
+
+  &.hasLogo {
+    max-width: var(--size-width-lead);
+  }
+
+  h1 {
+    font-size: var(--font-size-h1);
+    margin-bottom: var(--spacing-m);
+  }
+}
+
+@media (max-width: 600px) {
+  .associationHeader {
+    grid-template-columns: 1fr;
+
+    img {
+      max-width: 16rem;
+    }
+  }
+}
\ No newline at end of file