8c3f8c74db
Feature/SW-3365 reduce upscaling of images (fix blurry images) * fix: handle when images are wider than 3:2 but rendered in a 3:2 container * use dimensions everywhere applicable * fall back to using <img sizes='auto' /> if possible * imageLoader: never nest * remove empty test file Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import Body from "@scandic-hotels/design-system/Body"
|
|
import Chip from "@scandic-hotels/design-system/Chip"
|
|
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 styles from "./contentCard.module.css"
|
|
|
|
import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
|
|
|
|
interface ContentCardProps {
|
|
link?: {
|
|
href: string
|
|
openInNewTab?: boolean
|
|
isExternal?: boolean
|
|
}
|
|
heading: string
|
|
image: ImageVaultAsset
|
|
bodyText: string
|
|
promoText?: string
|
|
className?: string
|
|
}
|
|
|
|
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}
|
|
dimensions={image.dimensions}
|
|
/>
|
|
{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>
|
|
)
|
|
}
|