38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
|
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() {
|
||
|
|
let matches = useMatches();
|
||
|
|
const { token } = theme.useToken()
|
||
|
|
let 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>
|
||
|
|
);
|
||
|
|
}
|