Files
web/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx
Anton Gunnarsson cbf9e7b7c2 Merged in chore/next15 (pull request #1999)
chore (SW-834): Upgrade to Next 15

* wip: apply codemod and upgrade swc plugin

* wip: design-system to react 19, fix issues from async (search)params

* wip: fix remaining issues from codemod

serverClient is now async because context use headers()
getLang is now async because it uses headers()

* Minor cleanup

* Inline react-material-symbols package

Package is seemingly not maintained any more and doesn't support
React 19. This copies the package source into `design-system`,
makes the necessary changes for 19 and export it for others to use.

* Fix missing awaits

* Disable modal exit animations

Enabling modal exit animations via isExiting prop is causing
modals to be rendered in "hidden" state and never unmount.
Seems to be an issue with react-aria-components,
see https://github.com/adobe/react-spectrum/issues/7563.
Can probably be fixed by rewriting to a solution similar to
https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html

* Remove unstable cache implementation and use in memory cache locally

* Fix ref type in SelectFilter

* Use cloneElement to add key prop to element


Approved-by: Linus Flood
2025-06-02 11:11:50 +00:00

76 lines
1.9 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(props: PropsWithChildren<LayoutArgs<LangParams>>) {
const params = await props.params;
const {
children
} = props;
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}
/>
)
}