67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
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) {
|
|
if (!mainLinks.length) {
|
|
return null
|
|
}
|
|
return (
|
|
<nav className={styles.mainNavigation}>
|
|
<ul className={styles.mainNavigationList}>
|
|
{mainLinks.map((link) => (
|
|
<li key={link.title} className={styles.mainNavigationItem}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<Link
|
|
href={link.url}
|
|
className={styles.mainNavigationLink}
|
|
target={link.openInNewTab ? "_blank" : undefined}
|
|
onClick={() => trackFooterClick("main", link.title)}
|
|
>
|
|
{link.title}
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
color="Icon/Interactive/Secondary"
|
|
/>
|
|
</Link>
|
|
</Typography>
|
|
</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}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<span className={styles.mainNavigationLink}>
|
|
<SkeletonShimmer width="80%" />
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
color="Icon/Interactive/Secondary"
|
|
/>
|
|
</span>
|
|
</Typography>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|