a2213d0169
feat(SW-3228): Move Image to design-system * Move Image to design-system * Merge branch 'master' into feat/sw-3228-move-image-to-design-system Approved-by: Linus Flood
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import Body from "@scandic-hotels/design-system/Body"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
import Link from "@scandic-hotels/design-system/Link"
|
|
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
|
|
|
import Chip from "@/components/TempDesignSystem/Chip"
|
|
|
|
import styles from "./contentCard.module.css"
|
|
|
|
import type { 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
|
|
|
|
const linkProps = {
|
|
...(link.openInNewTab && {
|
|
target: "_blank",
|
|
rel: "noopener noreferrer",
|
|
}),
|
|
}
|
|
|
|
return (
|
|
<Link href={link.href} {...linkProps}>
|
|
{card}
|
|
</Link>
|
|
)
|
|
}
|