c2b7d97ddd
feat(images): calculate width correct using aspect ratio * feat(images): calculate width correct using aspect ratio Approved-by: Erik Tiekstra
99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import Subtitle from "../Text/Subtitle"
|
|
import TeaserCardSidepeek from "./Sidepeek"
|
|
import { teaserCardVariants } from "./variants"
|
|
|
|
import styles from "./teaserCard.module.css"
|
|
|
|
import type { TeaserCardProps } from "@/types/components/teaserCard"
|
|
|
|
export default function TeaserCard({
|
|
title,
|
|
description,
|
|
primaryButton,
|
|
secondaryButton,
|
|
sidePeekButton,
|
|
sidePeekContent,
|
|
image,
|
|
intent,
|
|
alwaysStack = false,
|
|
className,
|
|
}: TeaserCardProps) {
|
|
const classNames = teaserCardVariants({ intent, alwaysStack, className })
|
|
|
|
const imageWidth =
|
|
image &&
|
|
Math.ceil(
|
|
image.dimensions.aspectRatio >= 1
|
|
? image.dimensions.aspectRatio * 200
|
|
: 200 / image.dimensions.aspectRatio
|
|
)
|
|
|
|
return (
|
|
<article className={classNames}>
|
|
{image && (
|
|
<Image
|
|
src={image.url}
|
|
alt={image.meta?.alt || ""}
|
|
className={styles.image}
|
|
width={imageWidth}
|
|
height={200}
|
|
focalPoint={image.focalPoint}
|
|
/>
|
|
)}
|
|
<div className={styles.content}>
|
|
<Subtitle textAlign="left" type="two" color="black">
|
|
{title}
|
|
</Subtitle>
|
|
<Body color="black">{description}</Body>
|
|
{sidePeekButton && sidePeekContent ? (
|
|
<TeaserCardSidepeek
|
|
button={sidePeekButton}
|
|
sidePeekContent={sidePeekContent}
|
|
/>
|
|
) : (
|
|
<div className={styles.ctaContainer}>
|
|
{primaryButton && (
|
|
<Button
|
|
asChild
|
|
intent="primary"
|
|
size="small"
|
|
className={styles.ctaButton}
|
|
>
|
|
<Link
|
|
href={primaryButton.href}
|
|
target={primaryButton.openInNewTab ? "_blank" : undefined}
|
|
color="none"
|
|
>
|
|
{primaryButton.title}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
{secondaryButton && (
|
|
<Button
|
|
asChild
|
|
intent="secondary"
|
|
size="small"
|
|
className={styles.ctaButton}
|
|
>
|
|
<Link
|
|
href={secondaryButton.href}
|
|
target={secondaryButton.openInNewTab ? "_blank" : undefined}
|
|
color="burgundy"
|
|
weight="bold"
|
|
>
|
|
{secondaryButton.title}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|