50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1609,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type IconProps = React.SVGProps; function IconDelete(props: IconProps) { return ( ); } interface ApiKey { id: string; name: string; prefix: string; secret: string; scopes: string[]; lastUsed: string; calls: number; } const KEYS: ApiKey[] = [ { id: 'k1', name: 'Production', prefix: 'sk_live_', secret: '4tR8wq2Zx9Lm', scopes: ['read', 'write'], lastUsed: '2 min ago', calls: 84210, }, { id: 'k2', name: 'Staging', prefix: 'sk_test_', secret: 'Jd83kPq0Nv1c', scopes: ['read', 'write'], lastUsed: '3 hours ago', calls: 6120, }, { id: 'k3', name: 'CI runner', prefix: 'sk_test_', secret: 'Vc29mTx7Qw4e', scopes: ['read'], lastUsed: 'Yesterday', calls: 1408, }, { id: 'k4', name: 'Analytics export', prefix: 'sk_live_', secret: 'Bn61sYh3Kf8u', scopes: ['read'], lastUsed: '4 days ago', calls: 340, }, { id: 'k5', name: 'Zapier', prefix: 'sk_live_', secret: 'Gp05dRw6Mz2a', scopes: ['read'], lastUsed: 'Aug 22', calls: 92, }, ]; function buildColumns(revealed: boolean): DataTableColumn[] { return [ { id: 'name', header: 'Name', sortable: true, value: (row) => row.name }, { id: 'secret', header: 'Key', value: (row) => row.prefix + row.secret, cell: (row) => (


          {row.prefix}
          {revealed ? row.secret : '••••••••••••'}

), }, { id: 'scopes', header: 'Scopes', hideBelow: 'sm', value: (row) => row.scopes.join(' '), cell: (row) => ( {row.scopes.map((scope) => ( {scope} ))} ), }, { id: 'lastUsed', header: 'Last used', hideBelow: 'md', value: (row) => row.lastUsed }, { id: 'calls', header: 'Calls (30d)', sortable: true, numeric: true, value: (row) => row.calls, cell: (row) => row.calls.toLocaleString('en-US'), }, ]; } export function ApiKeysTable({ variant = 'Masked' }: { variant?: 'Masked' | 'Revealed' }) { const columns = React.useMemo(() => buildColumns(variant === 'Revealed'), [variant]); const [keys, setKeys] = React.useState(KEYS); const removed = KEYS.length - keys.length; return (

row.id} rowLabel={(row) => `${row.name} key`} caption="API keys with masked secrets, scopes and recent usage." variant="panel" density="compact" title="API keys" onDelete={(ids) => setKeys((current) => current.filter((row) => !ids.includes(row.id)))} toolbar={ removed > 0 ? ( ) : null } rowActions={(row, { remove }) => ( )} />

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/tables/api-keys-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/api-keys-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]