Files
web/components/Footer/Navigation/SecondaryNav/index.tsx
2024-09-06 09:58:42 +02:00

74 lines
2.3 KiB
TypeScript

import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./secondarynav.module.css"
import {
AppDownLoadLinks,
type FooterSecondaryNavProps,
} from "@/types/components/footer/navigation"
export default function FooterSecondaryNav({
secondaryLinks,
appDownloads,
}: FooterSecondaryNavProps) {
console.log("secondaryLinks", secondaryLinks[0].links)
return (
<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.type} className={styles.appDownloadItem}>
<a
href={link.href.href}
target="_blank"
aria-label={link.href.title}
>
<Image
src={
AppDownLoadLinks[link.type as keyof typeof AppDownLoadLinks]
}
alt={link.href.title}
width={125}
height={40}
/>
</a>
</li>
))}
</ul>
</nav>
{secondaryLinks.map((link) => (
<nav className={styles.secondaryNavigationGroup} key={link.title}>
<Body color="peach80" textTransform="uppercase">
{link.title}
</Body>
<ul className={styles.secondaryNavigationList}>
{link.links.map((link) => (
<li key={link.id} className={styles.secondaryNavigationItem}>
{link.isExternal ? (
<a
href={link.url}
key={link.title}
target={link.openInNewTab ? "_blank" : "_self"}
aria-label={link.title}
>
{link.title}
</a>
) : (
<Link href={link.url} key={link.title}>
{link.title}
</Link>
)}
</li>
))}
</ul>
</nav>
))}
</div>
)
}