import { useForm } from "react-hook-form"
 
import { useFormDisable } from "@/hooks/use-form-disable"
 
export function ContactForm() {
  const form = useForm({
    defaultValues: {
      name: "",
      email: "",
      message: "",
    },
  })
 
  const { disabled } = useFormDisable({
    formState: form.formState,
  })
 
  const onSubmit = async (data: any) => {
    await submitForm(data)
  }
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <fieldset disabled={disabled}>
        <input {...form.register("name")} placeholder="Name" />
        <input {...form.register("email")} placeholder="Email" />
        <textarea {...form.register("message")} placeholder="Message" />
        <button type="submit">{disabled ? "Submitting..." : "Submit"}</button>
      </fieldset>
    </form>
  )
}

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
 
import { useFormDisable } from "@/hooks/use-form-disable"
 
const formSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email address"),
  message: z.string().min(1, "Message is required"),
})
 
export function ContactForm() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      message: "",
    },
  })
 
  const { disabled } = useFormDisable({
    formState: form.formState,
  })
 
  const onSubmit = async (data: z.infer<typeof formSchema>) => {
    await submitForm(data)
  }
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <fieldset disabled={disabled}>
        <input {...form.register("name")} placeholder="Name" />
        <input {...form.register("email")} placeholder="Email" />
        <textarea {...form.register("message")} placeholder="Message" />
        <button type="submit">{disabled ? "Submitting..." : "Submit"}</button>
      </fieldset>
    </form>
  )
}

import * as React from "react"
 
import { useFormDisable } from "@/hooks/use-form-disable"
 
export function ContactForm() {
  const [isSubmitting, setIsSubmitting] = React.useState(false)
 
  const { disabled } = useFormDisable({
    isSubmitting,
  })
 
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)
    try {
      await submitForm(new FormData(e.currentTarget))
    } finally {
      setIsSubmitting(false)
    }
  }
 
  return (
    <form onSubmit={onSubmit}>
      <fieldset disabled={disabled}>
        <input name="name" placeholder="Name" />
        <input name="email" placeholder="Email" />
        <textarea name="message" placeholder="Message" />
        <button type="submit">{disabled ? "Submitting..." : "Submit"}</button>
      </fieldset>
    </form>
  )
}