Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 5x 14x 29x 29x | // SPDX-License-Identifier: GPL-3.0-only
// Copyright (C) 2026 Max Boksem. See NOTICE for additional terms under GPLv3 section 7.
import { ChevronLeft } from "lucide-react";
interface BreadcrumbProps {
path: { label: string; onClick?: () => void }[];
}
export const Breadcrumb = ({ path }: BreadcrumbProps) => (
<div className="flex items-center gap-1.5 px-4 py-2.5 border-b border-border text-sm">
{path.map((segment, i) => {
const isLast = i === path.length - 1;
return (
<span key={i} className="flex items-center gap-1.5">
{i === 0 && segment.onClick && (
<ChevronLeft className="h-3.5 w-3.5 text-primary" />
)}
{isLast ? (
<span className="text-foreground font-medium">{segment.label}</span>
) : (
<button onClick={segment.onClick} className="text-primary hover:underline">
{segment.label}
</button>
)}
{!isLast && <span className="text-muted-foreground">/</span>}
</span>
);
})}
</div>
);
|