75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import NextLink from "next/link"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
import { trackClick } from "@scandic-hotels/tracking/base"
|
|
|
|
import { MarqueeText } from "@/components/MarqueeText"
|
|
|
|
import styles from "./campaignBanner.module.css"
|
|
|
|
import type { CampaignBannerProps } from "@/components/CampaignBanner/types"
|
|
|
|
export function DesktopCampaignBanner({
|
|
tag,
|
|
text,
|
|
link,
|
|
bookingCode,
|
|
}: CampaignBannerProps) {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<div className={styles.innerContent}>
|
|
<Typography variant="Tag/sm">
|
|
<span className={styles.tag}>{tag}</span>
|
|
</Typography>
|
|
<MarqueeText
|
|
backgroundColor="var(--Surface-Brand-Primary-3-Default)"
|
|
className={styles.marquee}
|
|
textWrapperClassName={styles.marqueeText}
|
|
>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<span className={styles.text}>
|
|
{text}
|
|
{bookingCode ? (
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<span className={styles.bookingCode}>
|
|
<MaterialIcon color="CurrentColor" icon="sell" size={16} />
|
|
{intl.formatMessage(
|
|
{
|
|
id: "campaignBanner.codeWithBookingCode",
|
|
defaultMessage: "Code: {bookingCode}",
|
|
},
|
|
{ bookingCode }
|
|
)}
|
|
</span>
|
|
</Typography>
|
|
) : null}
|
|
</span>
|
|
</Typography>
|
|
|
|
{link ? (
|
|
<Typography variant="Link/sm">
|
|
<NextLink
|
|
href={link.url}
|
|
className={styles.link}
|
|
onClick={() => trackClick("BW read more")}
|
|
>
|
|
<span>
|
|
{link.title ||
|
|
intl.formatMessage({
|
|
id: "common.readMore",
|
|
defaultMessage: "Read more",
|
|
})}
|
|
</span>
|
|
</NextLink>
|
|
</Typography>
|
|
) : null}
|
|
</MarqueeText>
|
|
</div>
|
|
)
|
|
}
|