4e: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"] 4f: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"] 50:T263e,// API Keys from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { Eye, EyeOff, KeyRound, Plus, Trash2 } from 'lucide-react'; import { cn } from '@/lib/utils'; import { CopyButton } from '@/registry/hirael/bases/radix/components/copy-button'; import { Button } from '@/registry/hirael/bases/radix/ui/button'; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/registry/hirael/bases/radix/ui/empty'; type ApiKeysProps = React.ComponentProps<'div'>; const ApiKeys = ({ className, ...props }: ApiKeysProps) => { return (

); }; type ApiKeysHeaderProps = React.ComponentProps<'div'>; const ApiKeysHeader = ({ className, ...props }: ApiKeysHeaderProps) => { return (

); }; type ApiKeysTitleProps = React.ComponentProps<'h3'>; const ApiKeysTitle = ({ className, ...props }: ApiKeysTitleProps) => { return

; }; type ApiKeysListProps = React.ComponentProps<'ul'>; const ApiKeysList = ({ className, ...props }: ApiKeysListProps) => { return
; }; type ApiKeyItemProps = React.ComponentProps<'li'>; const ApiKeyItem = ({ className, ...props }: ApiKeyItemProps) => { return (
); }; interface ApiKeyNameProps extends React.ComponentProps<'div'> { label: React.ReactNode; } const ApiKeyName = ({ label, className, children, ...props }: ApiKeyNameProps) => { return (
{label} {children ? {children} : null}
); }; interface ApiKeyValueProps extends Omit, 'children'> { value: string; /** Whether the key starts revealed. */ defaultRevealed?: boolean; /** Show the reveal toggle. Turn off for keys that can only be seen once. */ revealable?: boolean; /** Show the copy button. */ copyable?: boolean; } const ApiKeyValue = ({ value, defaultRevealed = false, revealable = true, copyable = true, className, ...props }: ApiKeyValueProps) => { const [revealed, setRevealed] = React.useState(defaultRevealed); const masked = `${value.slice(0, 3)}${'•'.repeat(8)}${value.slice(-4)}`; return (
{revealed ? value : masked} {revealable ? ( ) : null} {copyable ? : null}
); }; type ApiKeyMetaProps = React.ComponentProps<'span'>; const ApiKeyMeta = ({ className, ...props }: ApiKeyMetaProps) => { return ( ); }; export { ApiKeys, ApiKeysHeader, ApiKeysTitle, ApiKeysList, ApiKeyItem, ApiKeyName, ApiKeyValue, ApiKeyMeta }; const ENTER = 'animate-in fade-in slide-in-from-bottom-2 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none'; const SWAP = 'animate-in fade-in slide-in-from-bottom-1 duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none'; interface ApiKeyRow { id: string; label: string; created: string; used: string; value: string; /** Keys created here can't be revealed again once the one-time notice is dismissed. */ sealed?: boolean; } const API_KEY_ROWS: ApiKeyRow[] = [ { id: 'production', label: 'Production', created: 'Created Mar 4', used: 'Used 2h ago', value: 'sk_live_9f8a7b6c5d4e3f2a1b0c', }, { id: 'development', label: 'Development', created: 'Created Apr 18', used: 'Used 5d ago', value: 'sk_test_1a2b3c4d5e6f7g8h9i0j', }, ]; const generateSecret = () => { const bytes = new Uint8Array(10); crypto.getRandomValues(bytes); return `sk_live_${Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('')}`; }; const ApiKeysBlock = () => { const [rows, setRows] = React.useState(API_KEY_ROWS); const [revealedId, setRevealedId] = React.useState(null); const [confirmId, setConfirmId] = React.useState(null); const createdCount = React.useRef(0); const revealedRow = rows.find((row) => row.id === revealedId); const createKey = () => { createdCount.current += 1; const count = createdCount.current; const id = `key-${count}`; const row: ApiKeyRow = { id, label: `Server key ${count}`, created: 'Created just now', used: 'Never used', value: generateSecret(), sealed: true, }; setRows((current) => [...current, row]); setRevealedId(id); setConfirmId(null); }; const revoke = (id: string) => { setRows((current) => current.filter((row) => row.id !== id)); setConfirmId(null); if (revealedId === id) setRevealedId(null); }; return (
API keys {revealedRow ? (

{revealedRow.label} is ready

Copy it now and store it somewhere safe. You won't be able to see it again.

) : null} {rows.length === 0 ? ( No API keys Create a key to call the API from your servers. ) : ( {rows.map((row) => confirmId === row.id ? (
Revoke {row.label}? Requests using it start failing right away.

) : ( {row.created} {row.used} ), )} )}
); }; export default ApiKeysBlock; 4d:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hirael","registryDependencies":["button","https://hirael.com/r/copy-button.json","empty"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/blocks/api-keys/api-keys.tsx","content":"$50","type":"registry:block","target":"components/blocks/api-keys.tsx"}],"className":"h-[70svh] min-h-80"}]]}]