TypeScript 61.9%
HTML 37.2%
SQL 0.7%
1'use client';23import { useActionState, useState } from 'react';4import { createApiKeyAction } from '@/lib/auth/account-actions';5import { idle } from '@/lib/auth/state';6import { Field, FormMessage, SubmitButton, TextInput } from '@/components/account/form';78export function CreateKeyForm() {9 const [state, action] = useActionState(createApiKeyAction, idle);10 const [copied, setCopied] = useState(false);11 const secret = state.data?.secret as string | undefined;12 return (13 <form action={action} className="space-y-3" noValidate>14 <FormMessage state={state} />15 {secret ? (16 <div className="rounded-md border border-alert/40 bg-alert-bg p-3">17 <p className="mono-num break-all text-xs">{secret}</p>18 <button19 type="button"20 className="mt-2 h-8 rounded-md border border-border bg-elevated px-2.5 text-xs font-medium"21 onClick={async () => {22 await navigator.clipboard.writeText(secret);23 setCopied(true);24 }}25 >26 {copied ? 'Copied' : 'Copy key'}27 </button>28 </div>29 ) : null}30 <Field label="Key name" name="name" error={state.fieldErrors?.name}>31 <TextInput name="name" placeholder="e.g. Research notebook" maxLength={60} required />32 </Field>33 <SubmitButton pendingText="Creating…">Create key</SubmitButton>34 </form>35 );36}37