52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { SponsorBlock } from "@/gql/graphql";
|
|
import { Blocks } from "../blocks/Blocks";
|
|
import { Image } from "../general/Image";
|
|
import styles from "./sponsorList.module.scss";
|
|
|
|
const SponsorItem = ({ sponsor }: { sponsor: SponsorBlock }) => {
|
|
const { name, logo, website, text } = sponsor;
|
|
return (
|
|
<li className={styles.sponsorItem}>
|
|
<div className={styles.image}>
|
|
{logo && (
|
|
<Image
|
|
src={logo.url}
|
|
alt={`Logoen til ${name}`}
|
|
width={logo.width}
|
|
height={logo.height}
|
|
sizes="20vw"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={styles.text}>
|
|
<h2>{name}</h2>
|
|
{text && (
|
|
<p
|
|
className={styles.sponsorText}
|
|
dangerouslySetInnerHTML={{ __html: text }}
|
|
/>
|
|
)}
|
|
{website && (
|
|
<p className={styles.website}>
|
|
<a href={website} target="_blank" rel="noopener">
|
|
Besøk nettside
|
|
</a>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export const SponsorList = ({ sponsors }: { sponsors: SponsorBlock[] }) => {
|
|
return (
|
|
<section className={styles.sponsorList}>
|
|
<ul>
|
|
{sponsors.map((sponsor) => (
|
|
<SponsorItem key={sponsor.name} sponsor={sponsor} />
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
};
|