spb/rareindex

1'use client';23import { useActionState } from 'react';4import { resendCodeAction, verifyEmailAction } from '@/lib/auth/actions';5import { idle } from '@/lib/auth/state';6import { CodeInput, Cooldown, FormMessage, SubmitButton } from '@/components/account/form';78export function VerifyForm() {9  const [state, action] = useActionState(verifyEmailAction, idle);10  const [resend, resendAction] = useActionState(resendCodeAction, idle);11  const cooldown = typeof resend.data?.retryAfter === 'number' ? resend.data.retryAfter : resend.ok ? 45 : 0;12  return (13    <div className="mt-6 space-y-4">14      <form action={action} className="space-y-4" noValidate>15        <FormMessage state={state} />16        <CodeInput name="code" error={state.fieldErrors?.code} label="Verification code" />17        <SubmitButton className="w-full" pendingText="Checking…">18          Confirm19        </SubmitButton>20      </form>21      <form action={resendAction} className="text-center">22        <FormMessage state={resend} className="mb-3 text-left" />23        <Cooldown seconds={cooldown}>24          {(ready, left) => (25            <SubmitButton variant="ghost" className="h-8 text-xs" disabled={!ready}>26              {ready ? 'Send a new code' : `Send a new code in ${left}s`}27            </SubmitButton>28          )}29        </Cooldown>30      </form>31    </div>32  );33}34