81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
|
|
|
|
import styles from "./fullWidthCampaign.module.css"
|
|
|
|
import type { FullWidthCampaign } from "@/types/trpc/routers/contentstack/startPage"
|
|
|
|
interface FullWidthCampaignProps {
|
|
content: FullWidthCampaign
|
|
headingLevel?: "h1" | "h2"
|
|
}
|
|
|
|
export default function FullWidthCampaign({
|
|
content,
|
|
headingLevel = "h2",
|
|
}: FullWidthCampaignProps) {
|
|
const { background_image, primary_button, secondary_button } = content
|
|
const Hx = headingLevel
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{background_image ? (
|
|
<Image
|
|
className={styles.image}
|
|
alt={background_image.meta.alt || background_image.meta.caption || ""}
|
|
src={background_image.url}
|
|
focalPoint={background_image.focalPoint}
|
|
sizes="100vw"
|
|
fill
|
|
/>
|
|
) : null}
|
|
<div className={styles.content}>
|
|
<div className={styles.scriptedText}>
|
|
<BiroScript color="baseText" type="two" tilted="small">
|
|
{content.scripted_top_title}
|
|
</BiroScript>
|
|
</div>
|
|
<div className={styles.mainContent}>
|
|
<Typography variant="Title/mdLowCase">
|
|
<Hx className={styles.bodyText}>{content.heading}</Hx>
|
|
</Typography>
|
|
<Typography variant="Body/Lead text">
|
|
<p className={styles.bodyText}>{content.body_text}</p>
|
|
</Typography>
|
|
<div className={styles.buttons}>
|
|
{content.has_primary_button ? (
|
|
<ButtonLink
|
|
href={primary_button.href}
|
|
target={primary_button.openInNewTab ? "_blank" : undefined}
|
|
variant="Primary"
|
|
color="Inverted"
|
|
size="Small"
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
className={styles.button}
|
|
>
|
|
{primary_button.title}
|
|
</ButtonLink>
|
|
) : null}
|
|
{content.has_secondary_button ? (
|
|
<ButtonLink
|
|
href={secondary_button.href}
|
|
target={secondary_button.openInNewTab ? "_blank" : undefined}
|
|
variant="Secondary"
|
|
size="Small"
|
|
color="Inverted"
|
|
className={styles.button}
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
>
|
|
{secondary_button.title}
|
|
</ButtonLink>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|