49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
|
|
import Link from "next/link";
|
|
import { Image } from "@/components/general/Image";
|
|
import styles from "./featuredBlock.module.scss";
|
|
|
|
// the 'text' field has been aliased to 'featuredBlockText' and i'm
|
|
// using codegen the wrong way. let's specify the field here and move on
|
|
type FeaturedBlockTypeWithAlias = FeaturedBlockType & {
|
|
featuredBlockText: string;
|
|
};
|
|
|
|
export const FeaturedBlock = ({
|
|
block,
|
|
}: {
|
|
block: FeaturedBlockTypeWithAlias;
|
|
}) => {
|
|
const image = !!block.featuredImageOverride
|
|
? block.featuredImageOverride
|
|
: null;
|
|
// TODO: fetch image from target page
|
|
|
|
return (
|
|
<div
|
|
className={styles.featuredBlock}
|
|
data-background-color={block.backgroundColor ?? ""}
|
|
>
|
|
<div className={styles.text}>
|
|
<h2>{block.title}</h2>
|
|
<div dangerouslySetInnerHTML={{ __html: block.featuredBlockText }} />
|
|
<Link href={block.featuredPage.url ?? "#"}>
|
|
{block.linkText} →
|
|
</Link>
|
|
</div>
|
|
{image && (
|
|
<div className={styles.image}>
|
|
<Image
|
|
src={image.url}
|
|
alt={image.alt ?? ""}
|
|
width={image.width}
|
|
height={image.height}
|
|
sizes="(max-width: 800px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
)}
|
|
{!image && <div className={styles.placeholderImage} />}
|
|
</div>
|
|
);
|
|
};
|