1import { ChevronRight } from "lucide-react";
 2
 3interface CodeBreadcrumbProps {
 4  repoName: string;
 5  ref: string;
 6  path: string;
 7  // called when user clicks a breadcrumb segment — returns new path
 8  onNavigate: (path: string) => void;
 9}
10
11// Path breadcrumb for the code browser: repo name / ref / path segments.
12// Each segment is clickable to navigate up the tree.
13export function CodeBreadcrumb({ repoName, ref, path, onNavigate }: CodeBreadcrumbProps) {
14  const parts = path ? path.split("/").filter(Boolean) : [];
15
16  return (
17    <div className="flex flex-wrap items-center gap-1 font-mono text-sm">
18      <button
19        onClick={() => onNavigate("")}
20        className="text-foreground font-medium hover:underline"
21      >
22        {repoName}
23      </button>
24
25      {parts.map((part, i) => {
26        const partPath = parts.slice(0, i + 1).join("/");
27        const isLast = i === parts.length - 1;
28        return (
29          <span key={partPath} className="flex items-center gap-1">
30            <ChevronRight className="text-muted-foreground size-3.5" />
31            {isLast ? (
32              <span className="text-foreground font-medium">{part}</span>
33            ) : (
34              <button
35                onClick={() => onNavigate(partPath)}
36                className="text-muted-foreground hover:text-foreground hover:underline"
37              >
38                {part}
39              </button>
40            )}
41          </span>
42        );
43      })}
44
45      <span className="text-muted-foreground ml-2 text-xs">@ {ref}</span>
46    </div>
47  );
48}