add component for associationheader, misc association design adjustments

This commit is contained in:
elise
2024-08-09 17:02:37 +02:00
parent 50b9f5edd0
commit 99ad732a1e
4 changed files with 69 additions and 27 deletions

View File

@ -1,11 +1,8 @@
import { getClient } from "@/app/client"; import { getClient } from "@/app/client";
import { Breadcrumb } from "@/components/general/Breadcrumb"; import { AssociationHeader } from "@/components/associations/AssociationHeader";
import Icon from "@/components/general/Icon";
import { Image } from "@/components/general/Image";
import { PageContent } from "@/components/general/PageContent"; import { PageContent } from "@/components/general/PageContent";
import { graphql } from "@/gql"; import { graphql } from "@/gql";
import { AssociationFragment } from "@/gql/graphql"; import { AssociationFragment } from "@/gql/graphql";
import Link from "next/link";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
export async function generateStaticParams() { export async function generateStaticParams() {
@ -54,25 +51,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
return ( return (
<main className="site-main" id="main"> <main className="site-main" id="main">
<Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} /> <AssociationHeader association={association} />
<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>
{association.lead && ( {association.lead && (
<div <div
className="lead" className="lead"

View File

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

View File

@ -10,8 +10,8 @@ export const AssociationItem = ({
}) => { }) => {
return ( return (
<li className={`${styles.associationItem} linkItem`}> <li className={`${styles.associationItem} linkItem`}>
<div className={styles.image}> {association.logo && (
{association.logo && ( <div className={styles.image}>
<Image <Image
src={association.logo.url} src={association.logo.url}
alt={`Logoen til ${association.title}`} alt={`Logoen til ${association.title}`}
@ -19,8 +19,8 @@ export const AssociationItem = ({
height={0} height={0}
sizes="20vw" sizes="20vw"
/> />
)} </div>
</div> )}
<div className={styles.text}> <div className={styles.text}>
<h1 className={styles.title}>{association.title}</h1> <h1 className={styles.title}>{association.title}</h1>
{association.excerpt && ( {association.excerpt && (

View File

@ -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;
}
}
}