TypeScript 61.9%
HTML 37.2%
SQL 0.7%
1'use client';23import { useActionState, useState } from 'react';4import { signupAction } from '@/lib/auth/actions';5import { idle } from '@/lib/auth/state';6import { Field, FormMessage, PasswordField, SubmitButton, TextInput } from '@/components/account/form';78export function SignupForm({ next }: { next: string }) {9 const [state, action] = useActionState(signupAction, idle);10 const [email, setEmail] = useState('');11 return (12 <form action={action} className="mt-6 space-y-4" noValidate>13 <input type="hidden" name="next" value={next} />14 <FormMessage state={state} />15 <Field label="Name (optional)" name="name">16 <TextInput name="name" type="text" autoComplete="name" placeholder="How should we greet you?" maxLength={80} />17 </Field>18 <Field label="E-mail" name="email" error={state.fieldErrors?.email}>19 <TextInput name="email" type="email" autoComplete="email" required placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} invalid={Boolean(state.fieldErrors?.email)} />20 </Field>21 <PasswordField name="password" autoComplete="new-password" email={email} error={state.fieldErrors?.password} />22 <SubmitButton className="w-full" pendingText="Creating account…">23 Create account24 </SubmitButton>25 <p className="text-center text-[11px] leading-relaxed text-subtle">By continuing you agree that RareIndex is an information platform: valuations are estimates, not appraisals or investment advice.</p>26 </form>27 );28}29