scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-185): Footer mobile adjustments

Browse Source
This commit is contained in:
Pontus Dreij
2024-08-21 14:08:15 +02:00
parent 5277f3c786
commit 9eabde71c9
10 changed files with 269 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
components/Footer/Details/index.tsx
View File

@@ -1,23 +1,75 @@
import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import { detailsData } from "../mockedData"
import styles from "./details.module.css"
import { IconName } from "@/types/components/icon"
function socialIcon(iconName: string): JSX.Element | null {
const SocialIcon = getIconByIconName(iconName as IconName)
return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
}
export default async function FooterDetails() {
return (
<section className={styles.details}>
<div className={styles.imageContainer}>
<Image
alt="Scandic Hotels logo"
className={styles.logo}
data-js="scandiclogoimg"
data-nosvgsrc="/_static/img/scandic-logotype.png"
itemProp="logo"
height={30}
src="/_static/img/scandic-logotype-white.svg"
width={138}
/>
<div className={styles.socialLinks}>
<nav></nav>
<div className={styles.topContainer}>
<Link href="/">
<Image
alt="Scandic Hotels logo"
className={styles.logo}
data-js="scandiclogoimg"
data-nosvgsrc="/_static/img/scandic-logotype.png"
itemProp="logo"
height={22}
src="/_static/img/scandic-logotype-white.svg"
width={103}
/>
</Link>
<nav className={styles.socialNav}>
{detailsData.social.links.map((link) => (
<Link
className={styles.socialLink}
color="white"
href={link.href}
key={link.id}
target="_blank"
title={link.title}
>
{socialIcon(link.title)}
</Link>
))}
</nav>
</div>
<div className={styles.bottomContainer}>
<Body color="white">
<strong>{detailsData.copyrightCompany}</strong>{" "}
{detailsData.copyrightInfo}
</Body>
<div className={styles.navigationContainer}>
<nav className={styles.navigation}>
{detailsData.links.map((link) => (
<Link
className={styles.link}
color="white"
href={link.href}
key={link.id}
target="_blank"
title={link.title}
>
{link.title}
</Link>
))}
{
// This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
}
</nav>
<LanguageSwitcher urls={detailsData.languageSwitcher.urls} />
</div>
</div>
</section>