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="font-medium text-foreground 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="size-3.5 text-muted-foreground" />
31            {isLast ? (
32              <span className="font-medium text-foreground">{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="ml-2 text-xs text-muted-foreground">@ {ref}</span>
46    </div>
47  )
48}