71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { HouseIcon } from "@/components/Icons"
|
|
import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
|
|
import { breadcrumbsVariants } from "./variants"
|
|
|
|
import styles from "./breadcrumbs.module.css"
|
|
|
|
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
|
|
|
|
export default function Breadcrumbs({
|
|
breadcrumbs,
|
|
variant,
|
|
}: BreadcrumbsProps) {
|
|
if (!breadcrumbs?.length) {
|
|
return null
|
|
}
|
|
|
|
const classNames = breadcrumbsVariants({
|
|
variant,
|
|
})
|
|
|
|
const homeBreadcrumb = breadcrumbs.shift()
|
|
return (
|
|
<nav className={classNames}>
|
|
<ul className={styles.list}>
|
|
{homeBreadcrumb ? (
|
|
<li className={styles.listItem}>
|
|
<Link
|
|
className={styles.homeLink}
|
|
color="peach80"
|
|
href={homeBreadcrumb.href!}
|
|
variant="breadcrumb"
|
|
aria-label={homeBreadcrumb.title}
|
|
>
|
|
<HouseIcon width={16} height={16} color="peach80" />
|
|
</Link>
|
|
<ChevronRightSmallIcon aria-hidden="true" color="peach80" />
|
|
</li>
|
|
) : null}
|
|
|
|
{breadcrumbs.map((breadcrumb) => {
|
|
if (breadcrumb.href) {
|
|
return (
|
|
<li key={breadcrumb.uid} className={styles.listItem}>
|
|
<Link
|
|
color="peach80"
|
|
href={breadcrumb.href}
|
|
variant="breadcrumb"
|
|
>
|
|
{breadcrumb.title}
|
|
</Link>
|
|
<ChevronRightSmallIcon aria-hidden="true" color="peach80" />
|
|
</li>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<li key={breadcrumb.uid} className={styles.listItem}>
|
|
<Footnote color="burgundy" type="bold">
|
|
{breadcrumb.title}
|
|
</Footnote>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|