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
63 lines
1.6 KiB
TypeScript
63 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}
|
|
/>
|
|
) : 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>
|
|
)
|
|
}
|