83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { MarqueeText } from "@/components/MarqueeText"
|
|
|
|
import styles from "./campaignBanner.module.css"
|
|
|
|
import type { CampaignBannerProps } from "./types"
|
|
|
|
export function MobileCampaignBanner({
|
|
tag,
|
|
text,
|
|
link,
|
|
bookingCode,
|
|
}: CampaignBannerProps) {
|
|
const intl = useIntl()
|
|
|
|
if (bookingCode) {
|
|
return (
|
|
<p>
|
|
<Typography variant="Title/Overline/sm">
|
|
<span className={cx(styles.tag, styles.withBookingCode)}>{tag}</span>
|
|
</Typography>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<span>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
<> ∙ {text} </>
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<span className={styles.bookingCode}>
|
|
{intl.formatMessage(
|
|
{
|
|
id: "campaignBanner.codeWithBookingCode",
|
|
defaultMessage: "Code: {bookingCode}",
|
|
},
|
|
{ bookingCode }
|
|
)}
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
color="CurrentColor"
|
|
size={16}
|
|
/>
|
|
</span>
|
|
</Typography>
|
|
</span>
|
|
</Typography>
|
|
</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<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>{text}</span>
|
|
</Typography>
|
|
{link ? (
|
|
<Typography variant="Link/sm">
|
|
<span className={styles.fakeLink}>
|
|
{link.title ||
|
|
intl.formatMessage({
|
|
id: "common.readMore",
|
|
defaultMessage: "Read more",
|
|
})}
|
|
</span>
|
|
</Typography>
|
|
) : null}
|
|
</MarqueeText>
|
|
</>
|
|
)
|
|
}
|