import { Fragment, type ReactElement } from 'react';
import { ChevronRight, Home } from 'lucide-react';
import { Link, useMatches } from 'react-router-dom';
import type { RouteHandle } from '@/router/types.js';
interface Crumb {
title: string;
path: string;
isLast: boolean;
}
/**
* Breadcrumbs component - displays navigation path
* Reads breadcrumb data from route handles
*/
export function Breadcrumbs(): ReactElement {
const matches = useMatches();
// Build breadcrumb trail from matched routes
const crumbs: Crumb[] = matches
.filter(match => {
const handle = match.handle as RouteHandle | undefined;
return handle?.breadcrumb;
})
.map((match, index, array) => {
const handle = match.handle as RouteHandle;
const title =
typeof handle.breadcrumb === 'function'
? handle.breadcrumb(match.params)
: handle.breadcrumb || 'Page';
return {
title,
path: match.pathname,
isLast: index === array.length - 1,
};
});
// Don't render if no breadcrumbs
if (crumbs.length === 0) {
return ; // Spacer to maintain layout
}
return (
);
}