staff_data/apps/web/src/components/layout/breadcrumb.tsx

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>
	);
}