36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Fragment } from "react"
|
|
|
|
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
|
|
import styles from "./sidebar.module.css"
|
|
|
|
export default function SidebarNavigationSkeleton() {
|
|
const skeletonWidths = ["8ch", "10ch", "9ch", "12ch", "24ch", "10ch", "8ch"]
|
|
return (
|
|
<aside className={styles.sidebar}>
|
|
<nav className={styles.nav}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<SkeletonShimmer width="10ch" />
|
|
</Typography>
|
|
<Divider />
|
|
<ul className={styles.list}>
|
|
{skeletonWidths.map((width, index) => (
|
|
<Fragment key={index}>
|
|
{index === 4 && <Divider />}
|
|
<li>
|
|
<Link href="" size="regular" variant="sidebar">
|
|
<SkeletonShimmer width={width} />
|
|
</Link>
|
|
</li>
|
|
</Fragment>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|