Form (RHF + Zod)

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
  Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage,
} from "@bte/ui/form";
import { Input } from "@bte/ui/input";
import { Button } from "@bte/ui/button";

const schema = z.object({
  nome: z.string().min(2, "Informe ao menos 2 caracteres."),
  email: z.string().email("E-mail inválido."),
});

function InscricaoForm() {
  const form = useForm({ resolver: zodResolver(schema), defaultValues: { nome: "", email: "" } });
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit((v) => console.log(v))} className="flex flex-col gap-5">
        <FormField control={form.control} name="nome" render={({ field }) => (
          <FormItem>
            <FormLabel>Nome</FormLabel>
            <FormControl><Input placeholder="Henrique F." {...field} /></FormControl>
            <FormDescription>Como aparece no scoreboard.</FormDescription>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" size="sm">Inscrever</Button>
      </form>
    </Form>
  );
}