43 lines
1.2 KiB
TypeScript
Executable File
43 lines
1.2 KiB
TypeScript
Executable File
import React from "react";
|
|
import { useLocation, Link, useMatches } from "react-router-dom";
|
|
import { theme } from "antd";
|
|
import { RightOutlined } from "@ant-design/icons";
|
|
|
|
export default function Breadcrumb() {
|
|
const matches = useMatches();
|
|
const { token } = theme.useToken();
|
|
|
|
const crumbs = matches
|
|
// first get rid of any matches that don't have handle and crumb
|
|
.filter((match) => Boolean((match.handle as any)?.crumb))
|
|
// now map them into an array of elements, passing the loader
|
|
// data to each one
|
|
.map((match) => (match.handle as any).crumb(match.data));
|
|
|
|
return (
|
|
<ol className="flex items-center space-x-2 text-gray-600">
|
|
{crumbs.map((crumb, index) => (
|
|
<React.Fragment key={index}>
|
|
<li
|
|
className={`inline-flex items-center `}
|
|
style={{
|
|
color:
|
|
index === crumbs.length - 1
|
|
? token.colorPrimaryText
|
|
: token.colorTextSecondary,
|
|
fontWeight:
|
|
index === crumbs.length - 1 ? "bold" : "normal",
|
|
}}>
|
|
{crumb}
|
|
</li>
|
|
{index < crumbs.length - 1 && (
|
|
<li className="mx-2">
|
|
<RightOutlined></RightOutlined>
|
|
</li>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</ol>
|
|
);
|
|
}
|