58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { ArrowRightIcon } from "@/components/Icons"
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { trackFooterClick } from "@/utils/tracking"
|
|
|
|
import styles from "./mainnav.module.css"
|
|
|
|
import type { FooterMainNavProps } from "@/types/components/footer/navigation"
|
|
|
|
export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
|
|
return (
|
|
<nav className={styles.mainNavigation}>
|
|
<ul className={styles.mainNavigationList}>
|
|
{mainLinks.map((link) => (
|
|
<li key={link.title} className={styles.mainNavigationItem}>
|
|
<Subtitle color="baseTextHighContrast" type="two" asChild>
|
|
<Link
|
|
color="burgundy"
|
|
href={link.url}
|
|
className={styles.mainNavigationLink}
|
|
target={link.openInNewTab ? "_blank" : undefined}
|
|
onClick={() => trackFooterClick("main", link.title)}
|
|
>
|
|
{link.title}
|
|
<ArrowRightIcon color="peach80" />
|
|
</Link>
|
|
</Subtitle>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export function FooterMainNavSkeleton() {
|
|
const items = Array.from({ length: 4 }).map((_, i) => i)
|
|
|
|
return (
|
|
<nav className={styles.mainNavigation}>
|
|
<ul className={styles.mainNavigationList}>
|
|
{items.map((x) => (
|
|
<li key={x} className={styles.mainNavigationItem}>
|
|
<Subtitle color="baseTextHighContrast" type="two" asChild>
|
|
<span className={styles.mainNavigationLink}>
|
|
<SkeletonShimmer width="80%" />
|
|
<ArrowRightIcon color="peach80" />
|
|
</span>
|
|
</Subtitle>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|