cbf9e7b7c2
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
115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { getFooter } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import Image from "@/components/Image"
|
|
import LanguageSwitcher from "@/components/LanguageSwitcher"
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
import SocialLink from "./SocialLink"
|
|
|
|
import styles from "./details.module.css"
|
|
|
|
export default async function FooterDetails() {
|
|
const lang = await getLang()
|
|
const intl = await getIntl()
|
|
// preloaded
|
|
const footer = await getFooter()
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
return (
|
|
<div className={styles.details}>
|
|
<div className={styles.topContainer}>
|
|
<Link href={`/${lang}`}>
|
|
<Image
|
|
alt="Scandic Hotels logo"
|
|
height={22}
|
|
src="/_static/img/scandic-logotype-white.svg"
|
|
width={103}
|
|
/>
|
|
</Link>
|
|
<nav className={styles.socialNav}>
|
|
{footer?.socialMedia.links.map(
|
|
({ href }) => href && <SocialLink link={href} key={href.title} />
|
|
)}
|
|
</nav>
|
|
</div>
|
|
<div className={styles.bottomContainer}>
|
|
<Typography variant="Tag/sm">
|
|
<p>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"© {currentYear} Scandic AB All rights reserved",
|
|
},
|
|
{ currentYear }
|
|
)}
|
|
</p>
|
|
</Typography>
|
|
<div className={styles.navigationContainer}>
|
|
<nav className={styles.navigation}>
|
|
{footer?.tertiaryLinks.map((link) => (
|
|
<Typography key={link.title} variant="Tag/sm">
|
|
<Link
|
|
className={styles.link}
|
|
color="peach50"
|
|
href={link.url}
|
|
target="_blank"
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
</Typography>
|
|
))}
|
|
</nav>
|
|
<LanguageSwitcher type="footer" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function FooterDetailsSkeleton() {
|
|
const lang = await getLang()
|
|
const intl = await getIntl()
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
return (
|
|
<section className={styles.details}>
|
|
<div className={styles.topContainer}>
|
|
<Link href={`/${lang}`}>
|
|
<Image
|
|
alt="Scandic Hotels logo"
|
|
height={22}
|
|
src="/_static/img/scandic-logotype-white.svg"
|
|
width={103}
|
|
/>
|
|
</Link>
|
|
<nav className={styles.socialNav}>
|
|
<SkeletonShimmer width="10ch" height="20px" contrast="dark" />
|
|
</nav>
|
|
</div>
|
|
<div className={styles.bottomContainer}>
|
|
<Typography variant="Tag/sm">
|
|
<p>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"© {currentYear} Scandic AB All rights reserved",
|
|
},
|
|
{ currentYear }
|
|
)}
|
|
</p>
|
|
</Typography>
|
|
<div className={styles.navigationContainer}>
|
|
<nav className={styles.navigation}>
|
|
<SkeletonShimmer width="40ch" height="20px" contrast="dark" />
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|