7c8d6cbc2e
feat(SW-1384): Implement filtering for CarouselCards component * feat(SW-1384): Implement filtering for CarouselCards component * fix(SW-1384): Simplify CarouselCards filters scrolling styles * refactor(SW-1384): Simplify CarouselCards filtering logic Approved-by: Christian Andolf
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>
|
|
}
|