aa06a0654d
cleanup profile page html to be valid replace old temp design system components with new ones divider is now correctly an hr element less section elements to be valid html
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Fragment } from "react"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
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 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>
|
|
)
|
|
}
|