85a90baa12
fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths * fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths Approved-by: Christian Andolf Approved-by: Linus Flood
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
|
|
|
|
import { breadcrumbsVariants } from "../variants"
|
|
|
|
import type { BreadcrumbsProps } from "../breadcrumbs"
|
|
|
|
export default function BreadcrumbsSkeleton({
|
|
color,
|
|
size,
|
|
}: Pick<BreadcrumbsProps, "color" | "size">) {
|
|
const classNames = breadcrumbsVariants({ color, size })
|
|
return (
|
|
<nav className={classNames}>
|
|
<ul className={styles.list}>
|
|
<li className={styles.listItem}>
|
|
<MaterialIcon
|
|
icon="home"
|
|
size={20}
|
|
color="Icon/Interactive/Secondary"
|
|
/>
|
|
<MaterialIcon
|
|
icon="chevron_right"
|
|
aria-hidden="true"
|
|
color="Icon/Interactive/Secondary"
|
|
size={20}
|
|
/>
|
|
</li>
|
|
|
|
<li className={styles.listItem}>
|
|
<Typography variant="Label/xsBold">
|
|
<SkeletonShimmer width="20ch" />
|
|
</Typography>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|