35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { Fragment } from "react"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
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}>
|
|
<Subtitle type="two" color="baseTextHighContrast">
|
|
<SkeletonShimmer width={"10ch"} />
|
|
</Subtitle>
|
|
<Divider color="beige" />
|
|
<ul className={styles.list}>
|
|
{skeletonWidths.map((width, index) => (
|
|
<Fragment key={index}>
|
|
{index === 4 && <Divider color="beige" />}
|
|
<li>
|
|
<Link href="" size="regular" variant="sidebar">
|
|
<SkeletonShimmer width={width} />
|
|
</Link>
|
|
</li>
|
|
</Fragment>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|