Files
web/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx

73 lines
1.8 KiB
TypeScript

import { ArrowLeft } from "react-feather"
import { overview as profileOverview } from "@/constants/routes/myPages"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import background from "@/public/_static/img/partner/sas/sas_x_scandic_airplane_window_background.jpg"
import styles from "./layout.module.css"
import type { PropsWithChildren } from "react"
import type { LangParams, LayoutArgs } from "@/types/params"
export default async function SasXScandicLayout({
children,
params,
}: PropsWithChildren<LayoutArgs<LangParams>>) {
const intl = await getIntl()
return (
<div
className={styles.layout}
style={{ backgroundImage: `url(${background.src})` }}
>
<header className={styles.header}>
{/* TODO should this link to my-pages sas page? */}
<Link className={styles.backLink} href={profileOverview[params.lang]}>
<ArrowLeft height={20} width={20} />
<span className={styles.long}>
{intl.formatMessage({
defaultMessage: "Back to scandichotels.com",
})}
</span>
<span className={styles.short}>
{intl.formatMessage({
defaultMessage: "Back",
})}
</span>
</Link>
<MainMenuLogo />
</header>
<section className={styles.content}>{children}</section>
</div>
)
}
async function MainMenuLogo() {
const intl = await getIntl()
return (
<Logo
alt={intl.formatMessage({
defaultMessage: "Back to scandichotels.com",
})}
/>
)
}
function Logo({ alt }: { alt: string }) {
return (
<Image
alt={alt}
className={styles.logo}
height={22}
src="/_static/img/scandic-logotype.svg"
priority
width={103}
/>
)
}