133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
|
|
import Image from "@/components/Image"
|
|
import LanguageSwitcher from "@/components/LanguageSwitcher"
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
import styles from "./details.module.css"
|
|
|
|
import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
|
|
import type { IconName } from "@/types/components/icon"
|
|
|
|
function SocialIcon({ iconName }: SocialIconsProps) {
|
|
const SocialIcon = getIconByIconName(iconName as IconName)
|
|
return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
|
|
}
|
|
|
|
export default async function FooterDetails() {
|
|
const lang = getLang()
|
|
const intl = await getIntl()
|
|
// preloaded
|
|
const footer = await getFooter()
|
|
const languages = await getLanguageSwitcher()
|
|
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}>
|
|
{footer?.socialMedia.links.map(
|
|
(link) =>
|
|
link.href && (
|
|
<a
|
|
color="white"
|
|
href={link.href.href}
|
|
key={link.href.title}
|
|
target="_blank"
|
|
aria-label={link.href.title}
|
|
>
|
|
<SocialIcon iconName={link.href.title} />
|
|
</a>
|
|
)
|
|
)}
|
|
</nav>
|
|
</div>
|
|
<div className={styles.bottomContainer}>
|
|
<div className={styles.copyrightContainer}>
|
|
<Footnote type="label" textTransform="uppercase">
|
|
© {currentYear}{" "}
|
|
{intl.formatMessage({ id: "Copyright all rights reserved" })}
|
|
</Footnote>
|
|
</div>
|
|
<div className={styles.navigationContainer}>
|
|
<nav className={styles.navigation}>
|
|
{footer?.tertiaryLinks.map(
|
|
(link) =>
|
|
link.url && (
|
|
<Footnote
|
|
asChild
|
|
type="label"
|
|
textTransform="uppercase"
|
|
key={link.title}
|
|
>
|
|
<Link
|
|
className={styles.link}
|
|
color="peach50"
|
|
href={link.url}
|
|
target="_blank"
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
</Footnote>
|
|
)
|
|
)}
|
|
</nav>
|
|
{languages?.urls ? (
|
|
<LanguageSwitcher type="footer" urls={languages.urls} />
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export async function FooterDetailsSkeleton() {
|
|
const lang = 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}>
|
|
<div className={styles.copyrightContainer}>
|
|
<Footnote type="label" textTransform="uppercase">
|
|
© {currentYear}{" "}
|
|
{intl.formatMessage({ id: "Copyright all rights reserved" })}
|
|
</Footnote>
|
|
</div>
|
|
<div className={styles.navigationContainer}>
|
|
<nav className={styles.navigation}>
|
|
<SkeletonShimmer width="40ch" height="20px" contrast="dark" />
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|