f3e6318d49
feat(SW-1383): Implement ContentCard for the Start Page * feat(SW-1383): Implement ContentCard - Add ContentCard component - Use within CarouselCards component * fix(SW-1383): adjust carousel and content card styling * refactor(SW-1383): optimize ContentCard component styling and props * feat(SW-1383): move ContentCard image check out of component * feat(SW-1383): Add optional link prop to ContentCard component * refactor(SW-1383): Make ContentCard component linkable Approved-by: Christian Andolf Approved-by: Erik Tiekstra
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import Image from "@/components/Image"
|
|
import Chip from "@/components/TempDesignSystem/Chip"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./contentCard.module.css"
|
|
|
|
import type { ContentCardLinkProps,ContentCardProps } from "./contentCard"
|
|
|
|
export default function ContentCard({
|
|
heading,
|
|
image,
|
|
bodyText,
|
|
promoText,
|
|
className = "",
|
|
link,
|
|
}: ContentCardProps) {
|
|
const card = (
|
|
<article className={`${styles.card} ${className}`}>
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src={image.url}
|
|
alt={image.meta.alt || image.meta.caption || ""}
|
|
className={styles.image}
|
|
fill
|
|
sizes="(min-width: 768px) 413px, 100vw"
|
|
focalPoint={image.focalPoint}
|
|
/>
|
|
{promoText ? (
|
|
<Chip className={styles.promoTag}>{promoText}</Chip>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.content}>
|
|
<Subtitle type="two">{heading}</Subtitle>
|
|
<Body>{bodyText}</Body>
|
|
</div>
|
|
</article>
|
|
)
|
|
|
|
if (!link) return card
|
|
|
|
return (
|
|
<ContentCardLink
|
|
href={link.href}
|
|
openInNewTab={link.openInNewTab}
|
|
isExternal={link.isExternal}
|
|
>
|
|
{card}
|
|
</ContentCardLink>
|
|
)
|
|
}
|
|
|
|
function ContentCardLink({
|
|
children,
|
|
href,
|
|
openInNewTab,
|
|
isExternal,
|
|
}: ContentCardLinkProps) {
|
|
const Component = isExternal ? "a" : Link
|
|
const linkProps = {
|
|
href,
|
|
...(openInNewTab && {
|
|
target: "_blank",
|
|
rel: "noopener noreferrer",
|
|
}),
|
|
}
|
|
|
|
return <Component {...linkProps}>{children}</Component>
|
|
}
|