104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
|
|
import { VariantProps } from "class-variance-authority"
|
|
import { TeaserCardSidepeekContent } from "../../types/sidepeekContent"
|
|
import { type ButtonProps } from "../Button"
|
|
import ButtonLink from "../ButtonLink"
|
|
import Image from "../Image"
|
|
import { Typography } from "../Typography"
|
|
import TeaserCardSidepeek from "./Sidepeek"
|
|
import styles from "./teaserCard.module.css"
|
|
import { teaserCardVariants } from "./variants"
|
|
|
|
interface SidePeekButton {
|
|
call_to_action_text: string
|
|
}
|
|
|
|
interface TeaserCardButton extends Pick<ButtonProps, "onPress"> {
|
|
title: string
|
|
href: string
|
|
openInNewTab?: boolean
|
|
}
|
|
interface TeaserCardProps extends VariantProps<typeof teaserCardVariants> {
|
|
heading: string
|
|
bodyText: string
|
|
primaryButton?: TeaserCardButton
|
|
secondaryButton?: TeaserCardButton
|
|
sidePeekButton?: SidePeekButton
|
|
sidePeekContent?: TeaserCardSidepeekContent
|
|
image?: ImageVaultAsset
|
|
className?: string
|
|
}
|
|
|
|
export function TeaserCard({
|
|
heading,
|
|
bodyText,
|
|
primaryButton,
|
|
secondaryButton,
|
|
sidePeekButton,
|
|
sidePeekContent,
|
|
image,
|
|
style,
|
|
alwaysStack = false,
|
|
className,
|
|
}: TeaserCardProps) {
|
|
const classNames = teaserCardVariants({ style, alwaysStack, className })
|
|
|
|
return (
|
|
<article className={classNames}>
|
|
{image && (
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src={image.url}
|
|
alt={image.meta?.alt || ""}
|
|
focalPoint={image.focalPoint}
|
|
dimensions={image.dimensions}
|
|
fill
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className={styles.content}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<p>{heading}</p>
|
|
</Typography>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>{bodyText}</p>
|
|
</Typography>
|
|
|
|
{sidePeekButton && sidePeekContent ? (
|
|
<TeaserCardSidepeek
|
|
button={sidePeekButton}
|
|
sidePeekContent={sidePeekContent}
|
|
/>
|
|
) : (
|
|
<div className={styles.ctaContainer}>
|
|
{primaryButton && (
|
|
<ButtonLink
|
|
variant="Tertiary"
|
|
color="Primary"
|
|
size="sm"
|
|
className={styles.ctaButton}
|
|
href={primaryButton.href}
|
|
target={primaryButton.openInNewTab ? "_blank" : undefined}
|
|
>
|
|
{primaryButton.title}
|
|
</ButtonLink>
|
|
)}
|
|
{secondaryButton && (
|
|
<ButtonLink
|
|
variant="Secondary"
|
|
color="Primary"
|
|
size="sm"
|
|
className={styles.ctaButton}
|
|
href={secondaryButton.href}
|
|
target={secondaryButton.openInNewTab ? "_blank" : undefined}
|
|
>
|
|
{secondaryButton.title}
|
|
</ButtonLink>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|