1
7import { cn } from "@/lib/utils";
8import { SCOPE_GRANTS, type ApiKeyScope } from "@/lib/api-keys";
9
10const TONE: Record<ApiKeyScope, string> = {
11 READ: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
12 WRITE: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
13 ADMIN: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
14};
15
16export function ScopesBadge({ scopes, idPrefix }: { scopes: string[]; idPrefix: string }) {
17 return (
18 <span className="inline-flex flex-wrap items-center gap-1">
19 {scopes.map((s) => {
20 const scope = s as ApiKeyScope;
21 const descId = `${idPrefix}-scope-${s}`;
22 return (
23 <span
24 key={s}
25 aria-describedby={descId}
26 title={SCOPE_GRANTS[scope] ?? s}
27 className={cn(
28 "inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium",
29 TONE[scope] ?? "bg-muted text-muted-foreground",
30 )}
31 >
32 {s}
33 {}
34 <span id={descId} className="sr-only">
35 {SCOPE_GRANTS[scope] ?? ""}
36 </span>
37 </span>
38 );
39 })}
40 </span>
41 );
42}
43