33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
|
|
export interface Crumb {
|
|
label: string;
|
|
/** Where the crumb links; omit for the current (last) crumb. */
|
|
to?: string;
|
|
}
|
|
|
|
/**
|
|
* A breadcrumb navigation trail. The last crumb is the current page and is
|
|
* rendered as plain text; earlier crumbs link to their routes.
|
|
*/
|
|
export default function Breadcrumbs({ crumbs }: { crumbs: Crumb[] }) {
|
|
return (
|
|
<nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-sm text-zinc-400">
|
|
{crumbs.map((crumb, i) => {
|
|
const last = i === crumbs.length - 1;
|
|
return (
|
|
<span key={i} className="flex items-center gap-1">
|
|
{i > 0 && <span className="text-zinc-600">/</span>}
|
|
{crumb.to && !last ? (
|
|
<Link to={crumb.to} className="hover:text-zinc-100">
|
|
{crumb.label}
|
|
</Link>
|
|
) : (
|
|
<span className={last ? 'text-zinc-100' : ''}>{crumb.label}</span>
|
|
)}
|
|
</span>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
} |