91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import NextLink from "next/link"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import styles from "./contentCard.module.css"
|
|
|
|
import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
|
|
import { ChipStatic } from "../ChipStatic"
|
|
import Image from "../Image"
|
|
import { Typography } from "../Typography"
|
|
|
|
interface ContentCardProps {
|
|
link?: {
|
|
href: string
|
|
openInNewTab?: boolean
|
|
isExternal?: boolean
|
|
}
|
|
heading: string
|
|
image: ImageVaultAsset
|
|
bodyText: string
|
|
promoText?: string
|
|
className?: string
|
|
}
|
|
|
|
export function ContentCard({
|
|
heading,
|
|
image,
|
|
bodyText,
|
|
promoText,
|
|
className,
|
|
link,
|
|
}: ContentCardProps) {
|
|
const intl = useIntl()
|
|
|
|
const card = (
|
|
<article className={cx(styles.card, className)}>
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src={image.url}
|
|
alt={image.meta.alt || image.meta.caption || ""}
|
|
className={styles.image}
|
|
fill
|
|
sizes="(min-width: 768px) 413px, 100vw"
|
|
focalPoint={image.focalPoint}
|
|
dimensions={image.dimensions}
|
|
/>
|
|
{promoText ? (
|
|
<ChipStatic
|
|
color="Neutral"
|
|
size="sm"
|
|
lowerCase
|
|
className={styles.promoTag}
|
|
>
|
|
{promoText}
|
|
</ChipStatic>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.content}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<h4>{heading}</h4>
|
|
</Typography>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>{bodyText}</p>
|
|
</Typography>
|
|
</div>
|
|
</article>
|
|
)
|
|
|
|
if (!link) return card
|
|
|
|
const linkProps = {
|
|
className: styles.link,
|
|
...(link.openInNewTab && {
|
|
target: "_blank",
|
|
rel: "noopener noreferrer",
|
|
title: intl.formatMessage({
|
|
id: "common.linkOpenInNewTab",
|
|
defaultMessage: "Opens in a new tab/window",
|
|
}),
|
|
}),
|
|
}
|
|
|
|
return (
|
|
<NextLink href={link.href} {...linkProps}>
|
|
{card}
|
|
</NextLink>
|
|
)
|
|
}
|