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
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import Body from "@scandic-hotels/design-system/Body"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
import Link from "@scandic-hotels/design-system/Link"
|
|
import Title from "@scandic-hotels/design-system/Title"
|
|
|
|
import { loyaltyCardVariants } from "./variants"
|
|
|
|
import styles from "./loyaltyCard.module.css"
|
|
|
|
import type { LoyaltyCardProps } from "./loyaltyCard"
|
|
|
|
export default function LoyaltyCard({
|
|
link,
|
|
image,
|
|
heading,
|
|
bodyText,
|
|
theme = "white",
|
|
className,
|
|
}: LoyaltyCardProps) {
|
|
return (
|
|
<article
|
|
className={loyaltyCardVariants({
|
|
className,
|
|
theme,
|
|
})}
|
|
>
|
|
{image ? (
|
|
<Image
|
|
src={image.url}
|
|
width={180}
|
|
height={160}
|
|
className={styles.image}
|
|
alt={image.meta.alt || image.title}
|
|
focalPoint={image.focalPoint}
|
|
dimensions={image.dimensions}
|
|
/>
|
|
) : null}
|
|
<Title as="h4" level="h3" textAlign="center">
|
|
{heading}
|
|
</Title>
|
|
{bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
|
|
<div className={styles.buttonContainer}>
|
|
{link ? (
|
|
<Link
|
|
className={styles.link}
|
|
href={link.href}
|
|
target={link.openInNewTab ? "_blank" : undefined}
|
|
textDecoration="underline"
|
|
>
|
|
<MaterialIcon
|
|
icon="arrow_right"
|
|
color="CurrentColor"
|
|
className={styles.icon}
|
|
size={20}
|
|
/>
|
|
{link.title}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|