43 lines
960 B
TypeScript
43 lines
960 B
TypeScript
import type { FC } from "react";
|
|
|
|
import { Breadcrumbs } from "@mantine/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router";
|
|
|
|
import classes from "./AppBreadcrumbs.module.css";
|
|
|
|
type BreadcrumbTrailProps = { items: Crumb[] };
|
|
|
|
type Crumb = { label: string; to?: string };
|
|
|
|
const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
|
|
const { items } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Breadcrumbs
|
|
aria-label={t("breadcrumbs.label")}
|
|
className={classes.trail}
|
|
component="nav"
|
|
data-depth={items.length}
|
|
separator={<span aria-hidden="true">→</span>}
|
|
>
|
|
{items.map(item =>
|
|
item.to
|
|
? (
|
|
<Link className={classes.link} key={item.to} to={item.to}>
|
|
{item.label}
|
|
</Link>
|
|
)
|
|
: (
|
|
<span aria-current="page" key={item.label}>
|
|
{item.label}
|
|
</span>
|
|
),
|
|
)}
|
|
</Breadcrumbs>
|
|
);
|
|
};
|
|
|
|
export { BreadcrumbTrail, type Crumb };
|