5de2a993a7
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons. Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
|
|
|
|
import Image from "@/components/Image"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Title from "@/components/TempDesignSystem/Text/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}
|
|
color="burgundy"
|
|
href={link.href}
|
|
target={link.openInNewTab ? "_blank" : undefined}
|
|
variant="underscored"
|
|
>
|
|
<MaterialIcon
|
|
icon="arrow_right"
|
|
color="CurrentColor"
|
|
className={styles.icon}
|
|
size={20}
|
|
/>
|
|
{link.title}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|