Files
web/apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Breadcrumb.tsx

38 lines
908 B
TypeScript

import { cx } from "class-variance-authority"
import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Link from "@/components/TempDesignSystem/Link"
import styles from "./breadcrumbs.module.css"
import type { BreadcrumbProps } from "./breadcrumbs"
export function Breadcrumb({
className = "",
href,
children,
...props
}: BreadcrumbProps) {
return (
<AriaBreadcrumb className={cx(styles.listItem, className)} {...props}>
{href ? (
<>
<Link color="peach80" href={href} variant="breadcrumb">
{children}
</Link>
<MaterialIcon
icon="chevron_right"
size={20}
aria-hidden="true"
color="Icon/Interactive/Secondary"
/>
</>
) : (
children
)}
</AriaBreadcrumb>
)
}