131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import Image from "@/components/Image"
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import useLang from "@/hooks/useLang"
|
|
import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"
|
|
|
|
import styles from "./secondarynav.module.css"
|
|
|
|
import { AppDownLoadLinks } from "@/types/components/footer/appDownloadIcons"
|
|
import { type FooterSecondaryNavProps } from "@/types/components/footer/navigation"
|
|
|
|
export default function FooterSecondaryNav({
|
|
secondaryLinks,
|
|
appDownloads,
|
|
}: FooterSecondaryNavProps) {
|
|
const lang = useLang()
|
|
|
|
return (
|
|
<div className={styles.secondaryNavigation}>
|
|
{appDownloads && (
|
|
<nav className={styles.secondaryNavigationGroup}>
|
|
<Caption
|
|
color="textMediumContrast"
|
|
textTransform="uppercase"
|
|
type="label"
|
|
>
|
|
{appDownloads.title}
|
|
</Caption>
|
|
<ul className={styles.secondaryNavigationList}>
|
|
{appDownloads.links.map(
|
|
({ href, type }) =>
|
|
href && (
|
|
<li key={type} className={styles.appDownloadItem}>
|
|
<a
|
|
href={href.href}
|
|
target="_blank"
|
|
aria-label={href.title}
|
|
onClick={() => trackSocialMediaClick(href.title)}
|
|
>
|
|
<Image
|
|
src={
|
|
AppDownLoadLinks[
|
|
`${type}_${lang}` as keyof typeof AppDownLoadLinks
|
|
]
|
|
}
|
|
alt=""
|
|
width={125}
|
|
height={40}
|
|
/>
|
|
</a>
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
{secondaryLinks.map((group) => (
|
|
<nav className={styles.secondaryNavigationGroup} key={group.title}>
|
|
<Caption
|
|
color="textMediumContrast"
|
|
textTransform="uppercase"
|
|
type="label"
|
|
>
|
|
{group.title}
|
|
</Caption>
|
|
<ul className={styles.secondaryNavigationList}>
|
|
{group?.links?.map((link) => (
|
|
<li key={link.title} className={styles.secondaryNavigationItem}>
|
|
<Link
|
|
href={link.url}
|
|
target={link.openInNewTab ? "_blank" : undefined}
|
|
color="burgundy"
|
|
onClick={() => trackFooterClick(group.title, link.title)}
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function FooterSecondaryNavSkeleton() {
|
|
return (
|
|
<div className={styles.secondaryNavigation}>
|
|
<nav className={styles.secondaryNavigationGroup}>
|
|
<SkeletonShimmer width="10ch" />
|
|
<ul className={styles.secondaryNavigationList}>
|
|
<li className={styles.appDownloadItem}>
|
|
<SkeletonShimmer width="16ch" />
|
|
</li>
|
|
<li className={styles.appDownloadItem}>
|
|
<SkeletonShimmer width="16ch" />
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<nav className={styles.secondaryNavigationGroup}>
|
|
<SkeletonShimmer width="20ch" />
|
|
<ul className={styles.secondaryNavigationList}>
|
|
<li className={styles.secondaryNavigationItem}>
|
|
<SkeletonShimmer width="25ch" />
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<nav className={styles.secondaryNavigationGroup}>
|
|
<SkeletonShimmer width="15ch" />
|
|
<ul className={styles.secondaryNavigationList}>
|
|
<li className={styles.secondaryNavigationItem}>
|
|
<SkeletonShimmer width="30ch" />
|
|
</li>
|
|
<li className={styles.secondaryNavigationItem}>
|
|
<SkeletonShimmer width="36ch" />
|
|
</li>
|
|
<li className={styles.secondaryNavigationItem}>
|
|
<SkeletonShimmer width="12ch" />
|
|
</li>
|
|
<li className={styles.secondaryNavigationItem}>
|
|
<SkeletonShimmer width="20ch" />
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|