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

feat(SW-185): Fixed app download images

Browse Source
This commit is contained in:
Pontus Dreij
2024-08-22 16:38:35 +02:00
parent df0a9d661b
commit 07b564c8a4
6 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/Footer/Details/details.module.css
View File

@@ -59,6 +59,7 @@
} }
.bottomContainer { .bottomContainer {
border-top: 1px solid var(--Scandic-Peach-80); border-top: 1px solid var(--Scandic-Peach-80);
padding-top: var(--Spacing-x2);
flex-direction: row; flex-direction: row;
} }
.navigationContainer { .navigationContainer {

28
components/Footer/Navigation/SecondaryNav/index.tsx
View File

@@ -1,15 +1,41 @@
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./secondarynav.module.css" import styles from "./secondarynav.module.css"
import { FooterSecondaryNavProps } from "@/types/components/footer/navigation" import {
AppDownnLoadLinks,
FooterSecondaryNavProps,
} from "@/types/components/footer/navigation"
export default function FooterSecondaryNav({ export default function FooterSecondaryNav({
secondaryLinks, secondaryLinks,
appDownloads,
}: FooterSecondaryNavProps) { }: FooterSecondaryNavProps) {
return ( return (
<div className={styles.secondaryNavigation}> <div className={styles.secondaryNavigation}>
<nav className={styles.secondaryNavigationGroup}>
<Body color="peach80" textTransform="uppercase">
{appDownloads.title}
</Body>
<ul className={styles.secondaryNavigationList}>
{appDownloads.links.map((link) => (
<li key={link.id} className={styles.appDownloadItem}>
<a href={link.href} target="_blank" rel="noopener noreferrer">
<Image
src={
AppDownnLoadLinks[link.id as keyof typeof AppDownnLoadLinks]
}
alt={link.title}
width={125}
height={40}
/>
</a>
</li>
))}
</ul>
</nav>
{secondaryLinks.map((link) => ( {secondaryLinks.map((link) => (
<nav className={styles.secondaryNavigationGroup} key={link.title}> <nav className={styles.secondaryNavigationGroup} key={link.title}>
<Body color="peach80" textTransform="uppercase"> <Body color="peach80" textTransform="uppercase">

13
components/Footer/Navigation/index.tsx
View File

@@ -1,5 +1,3 @@
import MaxWidth from "@/components/MaxWidth"
import { footer } from "../mockedData" import { footer } from "../mockedData"
import FooterMainNav from "./MainNav" import FooterMainNav from "./MainNav"
import FooterSecondaryNav from "./SecondaryNav" import FooterSecondaryNav from "./SecondaryNav"
@@ -7,13 +5,16 @@ import FooterSecondaryNav from "./SecondaryNav"
import styles from "./navigation.module.css" import styles from "./navigation.module.css"
export default function FooterNavigation() { export default function FooterNavigation() {
const { mainLinks, secondaryLinks } = footer const { mainLinks, secondaryLinks, appDownloads } = footer
return ( return (
<section className={styles.section}> <section className={styles.section}>
<MaxWidth tag="div" className={styles.maxWidth}> <div className={styles.maxWidth}>
<FooterMainNav mainLinks={mainLinks} /> <FooterMainNav mainLinks={mainLinks} />
<FooterSecondaryNav secondaryLinks={secondaryLinks} /> <FooterSecondaryNav
</MaxWidth> secondaryLinks={secondaryLinks}
appDownloads={appDownloads}
/>
</div>
</section> </section>
) )
} }

1
components/Footer/Navigation/navigation.module.css
View File

@@ -9,6 +9,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
max-width: var(--max-width-content);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {

4
components/Footer/mockedData.ts
View File

@@ -35,12 +35,12 @@ export const footer = {
{ {
title: "App Store", title: "App Store",
href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712", href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712",
id: "app-store", id: "apple",
}, },
{ {
title: "Google Play", title: "Google Play",
href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels", href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels",
id: "google-play", id: "google",
}, },
], ],
}, },

13
types/components/footer/navigation.ts
View File

@@ -21,4 +21,17 @@ export type FooterSecondaryNavProps = {
title: string title: string
links: FooterSecondaryNav[] links: FooterSecondaryNav[]
}[] }[]
appDownloads: {
title: string
links: {
title: string
href: string
id: string
}[]
}
}
export enum AppDownnLoadLinks {
apple = "/_static/img/app-store-badge.svg",
google = "/_static/img/google-play-badge.svg",
} }