auth-project-nav.tsx61 lines · main

1	'use client';
2
3	import Link from 'next/link';
4	import { usePathname } from 'next/navigation';
5
6	const TABS: Array<{ href: string; label: string; exact?: boolean }> = [
7	{ href: '', label: 'overview', exact: true },
8	{ href: '/users', label: 'users' },
9	{ href: '/sessions', label: 'sessions' },
10	{ href: '/security', label: 'security' },
11	{ href: '/keys', label: 'keys' },
12	{ href: '/idp', label: 'IdP' },
13	{ href: '/providers', label: 'providers' },
14	{ href: '/branding', label: 'branding' },
15	{ href: '/enterprise', label: 'enterprise' },
16	];
17
18	/**
19	* Tabs for one Auth project — same pattern as project tabs.
20	* Selected tab = brighter text only (no thick accent underline).
21	*/
22	export function AuthProjectNav({ projectId }: { projectId: string }) {
23	const pathname = usePathname();
24	const base = `/dashboard/auth/${projectId}`;
25
26	return (
27	<div className="flex items-center gap-2 border-b border-[var(--color-border-subtle)]">
28	<nav
29	aria-label="Auth project sections"
30	className="flex flex-1 gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
31	>
32	{TABS.map((tab) => {
33	const href = `${base}${tab.href}`;
34	const active =
35	tab.exact === true
36	? pathname === base || pathname === `${base}/`
37	: pathname === href || pathname.startsWith(`${href}/`);
38	return (
39	<Link
40	key={tab.href || 'overview'}
41	href={href}
42	className={`shrink-0 whitespace-nowrap px-3 py-2 font-mono text-sm transition outline-none focus:outline-none focus-visible:outline-none ${
43	active
44	? 'font-medium text-[var(--color-text)]'
45	: 'text-[var(--color-text-muted)] hover:text-[var(--color-text)]'
46	}`}
47	>
48	{tab.label}
49	</Link>
50	);
51	})}
52	</nav>
53	<Link
54	href="/dashboard/auth"
55	className="shrink-0 whitespace-nowrap px-2 py-1 font-mono text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
56	>
57	← all Auth
58	</Link>
59	</div>
60	);
61	}