Files
web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
2024-12-17 07:45:55 +01:00

58 lines
1.8 KiB
TypeScript

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() {
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}>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"8ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"10ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"9ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"12ch"} />
</Link>
</li>
<Divider color="beige" />
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"24ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"10ch"} />
</Link>
</li>
<li>
<Link href="" size={"regular"} variant="sidebar">
<SkeletonShimmer width={"8ch"} />
</Link>
</li>
</ul>
</nav>
</aside>
)
}