Blame · repo-tabs.tsx

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