| 1 | import Link from "next/link"; |
| 2 | |
| 3 | interface RepoTabsProps { |
| 4 | owner: string; |
| 5 | repo: string; |
| 6 | active: "code" | "diffs" | "pipelines" | "commits" | "settings"; |
| 7 | } |
| 8 | |
| 9 | const tabs = [ |
| 10 | { key: "code", label: "Code", href: (o: string, r: string) => `/${o}/${r}` }, |
| 11 | { |
| 12 | key: "diffs", |
| 13 | label: "Diffs", |
| 14 | href: (o: string, r: string) => `/${o}/${r}/diffs`, |
| 15 | }, |
| 16 | { |
| 17 | key: "pipelines", |
| 18 | label: "Builds", |
| 19 | href: (o: string, r: string) => `/${o}/${r}/builds`, |
| 20 | }, |
| 21 | { |
| 22 | key: "commits", |
| 23 | label: "Commits", |
| 24 | href: (o: string, r: string) => `/${o}/${r}/commits`, |
| 25 | }, |
| 26 | { |
| 27 | key: "settings", |
| 28 | label: "Settings", |
| 29 | href: (o: string, r: string) => `/${o}/${r}/settings`, |
| 30 | }, |
| 31 | ] as const; |
| 32 | |
| 33 | export function RepoTabs({ owner, repo, active }: RepoTabsProps) { |
| 34 | return ( |
| 35 | <div |
| 36 | className="flex gap-0 text-sm mb-6" |
| 37 | style={{ borderBottom: "1px solid var(--border)" }} |
| 38 | > |
| 39 | {tabs.map((tab) => { |
| 40 | const isActive = tab.key === active; |
| 41 | return ( |
| 42 | <Link |
| 43 | key={tab.key} |
| 44 | href={tab.href(owner, repo)} |
| 45 | className="px-3 py-2 -mb-px transition-colors" |
| 46 | style={{ |
| 47 | color: isActive ? "var(--text-primary)" : "var(--text-muted)", |
| 48 | borderBottom: isActive |
| 49 | ? "2px solid var(--accent)" |
| 50 | : "2px solid transparent", |
| 51 | }} |
| 52 | > |
| 53 | {tab.label} |
| 54 | </Link> |
| 55 | ); |
| 56 | })} |
| 57 | </div> |
| 58 | ); |
| 59 | } |
| 60 | |