Skip to content

g1t/apps/web/app/components/workspace-security-tabs.tsx

35 lines1,275 bytesCodeBlame
1import { KeyRound, LayoutDashboard, Settings, ShieldQuestion } from "lucide-react";
2
3import { TabLink } from "./ui";
4import { TabStrip } from "./ui/tab-strip";
5
6/** The workspace's Security pages, as tabs. */
7export function WorkspaceSecurityTabs({ owner, pending }: { owner: string; pending?: number }) {
8 const base = `/${owner}/-/security`;
9 return (
10 <TabStrip label="Security" className="mb-6 gap-1 border-b border-line">
11 <TabLink to={base} end icon={<LayoutDashboard size={14} />}>
12 Overview
13 </TabLink>
14 <TabLink to={`${base}/bypass-requests`} icon={<ShieldQuestion size={14} />} count={pending}>
15 Bypass requests
16 </TabLink>
17 <TabLink to={`${base}/patterns`} icon={<KeyRound size={14} />}>
18 Custom patterns
19 </TabLink>
20 <TabLink to={`${base}/settings`} icon={<Settings size={14} />}>
21 Settings
22 </TabLink>
23 </TabStrip>
24 );
25}
26
27/** A Security sub-page's own heading, where the layout gives it none. */
28export function WorkspaceSecurityHeading({ title, about }: { title: string; about: string }) {
29 return (
30 <header className="mb-6">
31 <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
32 <p className="mt-1.5 text-sm text-muted">{about}</p>
33 </header>
34 );
35}