1import { Link } from "@tanstack/react-router";
 2import { ChevronRight } from "lucide-react";
 3
 4interface CodeBreadcrumbProps {
 5  repoName: string;
 6  currentRef: string;
 7  path: string;
 8  repo: string;
 9}
10
11// Path breadcrumb for the code browser: repo name / path segments.
12// Each segment is a Link to the corresponding tree path.
13export function CodeBreadcrumb({ repoName, currentRef, path, repo }: 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      <Link
19        to="/$repo/tree/$ref/$"
20        params={{ repo, ref: currentRef, _splat: "" }}
21        className="text-foreground font-medium hover:underline"
22      >
23        {repoName}
24      </Link>
25
26      {parts.map((part, i) => {
27        const partPath = parts.slice(0, i + 1).join("/");
28        const isLast = i === parts.length - 1;
29        return (
30          <span key={partPath} className="flex items-center gap-1">
31            <ChevronRight className="text-muted-foreground size-3.5" />
32            {isLast ? (
33              <span className="text-foreground font-medium">{part}</span>
34            ) : (
35              <Link
36                to="/$repo/tree/$ref/$"
37                params={{ repo, ref: currentRef, _splat: partPath }}
38                className="text-muted-foreground hover:text-foreground hover:underline"
39              >
40                {part}
41              </Link>
42            )}
43          </span>
44        );
45      })}
46
47      <span className="text-muted-foreground ml-2 text-xs">@ {currentRef}</span>
48    </div>
49  );
50}