101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import ButtonLink from '../ButtonLink'
|
|
import Image from '../Image'
|
|
import { Typography } from '../Typography'
|
|
|
|
import { getButtonProps } from './utils'
|
|
|
|
import { infoCardVariants } from './variants'
|
|
|
|
import styles from './infoCard.module.css'
|
|
|
|
import ImageFallback from '../ImageFallback'
|
|
import type { InfoCardProps } from './types'
|
|
|
|
export function InfoCard({
|
|
primaryButton,
|
|
secondaryButton,
|
|
topTitle,
|
|
heading,
|
|
bodyText,
|
|
className,
|
|
theme,
|
|
height,
|
|
backgroundImage,
|
|
topTitleAngled,
|
|
hotelTheme,
|
|
}: InfoCardProps) {
|
|
const classNames = infoCardVariants({
|
|
theme,
|
|
hotelTheme,
|
|
topTitleAngled,
|
|
height,
|
|
className,
|
|
})
|
|
const buttonProps = getButtonProps(theme, hotelTheme)
|
|
|
|
return (
|
|
<div className={classNames}>
|
|
{theme === 'Image' ? (
|
|
<div className={styles.backgroundImageWrapper}>
|
|
{backgroundImage ? (
|
|
<Image
|
|
src={backgroundImage.src}
|
|
className={styles.backgroundImage}
|
|
alt={backgroundImage.alt ?? ''}
|
|
fill
|
|
sizes="(min-width: 1367px) 700px, 900px"
|
|
focalPoint={backgroundImage.focalPoint}
|
|
dimensions={backgroundImage.dimensions}
|
|
/>
|
|
) : (
|
|
<ImageFallback className={styles.backgroundImage} />
|
|
)}
|
|
</div>
|
|
) : null}
|
|
<div className={styles.content}>
|
|
<div className={styles.titleWrapper}>
|
|
{topTitle ? (
|
|
<Typography variant="Title/Decorative/md">
|
|
<span className={styles.topTitle}>{topTitle}</span>
|
|
</Typography>
|
|
) : null}
|
|
<Typography variant="Title/smLowCase">
|
|
<h3 className={styles.heading}>{heading}</h3>
|
|
</Typography>
|
|
</div>
|
|
{bodyText ? (
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p className={styles.bodyText}>{bodyText}</p>
|
|
</Typography>
|
|
) : null}
|
|
<div className={styles.buttonContainer}>
|
|
{primaryButton ? (
|
|
<ButtonLink
|
|
size="Small"
|
|
href={primaryButton.href}
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
onClick={primaryButton.onClick}
|
|
scroll={primaryButton.scrollOnClick ?? false}
|
|
{...buttonProps.primaryButton}
|
|
>
|
|
{primaryButton.text}
|
|
</ButtonLink>
|
|
) : null}
|
|
{secondaryButton ? (
|
|
<ButtonLink
|
|
size="Small"
|
|
href={secondaryButton.href}
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
onClick={secondaryButton.onClick}
|
|
scroll={secondaryButton.scrollOnClick ?? false}
|
|
{...buttonProps.secondaryButton}
|
|
>
|
|
{secondaryButton.text}
|
|
</ButtonLink>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|