Initial commit

apps/frontend/src/features/onboard/components/onboarding-start-step.tsx

@@ -0,0 +1,58 @@
+import type { UseFormReturn } from 'react-hook-form'
+import { Button } from '@/components/ui/button'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import type { StartValues } from '@/features/onboard/onboarding.types'
+
+type OnboardingStartStepProps = {
+  form: UseFormReturn<StartValues>
+  errorMessage: string | null
+  infoMessage: string | null
+  onSubmit: (values: StartValues) => Promise<void>
+}
+
+export function OnboardingStartStep({
+  form,
+  errorMessage,
+  infoMessage,
+  onSubmit,
+}: OnboardingStartStepProps) {
+  return (
+    <form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
+      <Field data-invalid={Boolean(form.formState.errors.fullName)}>
+        <FieldLabel htmlFor="onboard-fullname">Nombre</FieldLabel>
+        <Input
+          id="onboard-fullname"
+          type="text"
+          placeholder="Nombre Apellido"
+          aria-invalid={Boolean(form.formState.errors.fullName)}
+          {...form.register('fullName')}
+        />
+        <FieldError errors={[form.formState.errors.fullName]} />
+      </Field>
+
+      <Field data-invalid={Boolean(form.formState.errors.email)}>
+        <FieldLabel htmlFor="onboard-email">Email</FieldLabel>
+        <Input
+          id="onboard-email"
+          type="email"
+          placeholder="tu@email.com"
+          aria-invalid={Boolean(form.formState.errors.email)}
+          {...form.register('email')}
+        />
+        <FieldError errors={[form.formState.errors.email]} />
+      </Field>
+
+      {errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
+      {infoMessage && <p className="text-sm text-muted-foreground">{infoMessage}</p>}
+
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={form.formState.isSubmitting || !form.formState.isValid}
+      >
+        {form.formState.isSubmitting ? 'Enviando...' : 'Enviar codigo OTP'}
+      </Button>
+    </form>
+  )
+}