ContactForm.tsx

import * as React from "react"

type ContactFormInput = {
  name: string
  email: string
  message: string
}

const initialState: ContactFormInput = {
  name: "",
  email: "",
  message: "",
}

const ContactSection: React.FC = () => {
  const [state, setState] = React.useState<ContactFormInput>(initialState)

  const handleInput: React.ChangeEventHandler<
    HTMLInputElement | HTMLTextAreaElement
  > = (event) => {
    setState({
      ...state,
      [event.target.name]: event.target.value,
    })
  }

  const handleSubmit: React.FormEventHandler = async (e) => {
    e.preventDefault()

    const response = await fetch("/api/contact", {
      body: JSON.stringify(state),
      headers: {
        "Content-Type": "application/json",
      },
      method: "POST",
    })

    const data = await response.json()

    console.log(data)
  }
  
  return <div></div>
}