1 files changed, 69 insertions, 0 deletions
diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
new file mode 100644
index 0000000..a64cb85
--- /dev/null
+++ b/components/ContactForm.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import styles from '~/styles/form.module.css'
+
+const submitUrl = 'https://contact.tempest.dev/api/contact/me'
+import { useState, useRef, FormEvent } from 'react'
+
+export default function ContactForm() {
+  const [submitting, setSubmitting] = useState(false)
+  const [status, setStatus] = useState('')
+
+  const nameRef = useRef<HTMLInputElement>()
+  const emailRef = useRef<HTMLInputElement>()
+  const messageRef = useRef<HTMLTextAreaElement>()
+
+  const submit = async (ev: FormEvent<HTMLFormElement>) => {
+    ev.preventDefault()
+
+    setStatus('')
+
+    const name = nameRef.current.value
+    const email = emailRef.current.value
+    const message = messageRef.current.value
+
+    if (!name) setStatus(s => s + ' Name required.')
+    if (!email) setStatus(s => s + ' Email required.')
+    if (!message) setStatus(s => s + ' Message required.')
+
+    if (!name || !email || !message)
+      return
+
+    setSubmitting(true)
+
+    try {
+
+      await fetch(submitUrl, {
+        method: 'post',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify({
+          name, email, message
+        })
+      })
+
+      setStatus('Message sent successfully')
+    } catch {
+      setStatus('Error submitting message, please try again')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form className={styles.form} onSubmit={submit}>
+      <label htmlFor="name">Name:</label>
+      <input disabled={submitting} name="name" ref={nameRef} />
+
+      <label htmlFor="email">Email:</label>
+      <input disabled={submitting} name="email" ref={emailRef} />
+
+      <label htmlFor="message">Message:</label>
+      <textarea disabled={submitting} name="message" ref={messageRef} />
+
+      <button disabled={submitting} type="submit">Submit</button>
+      {status && <span className={styles.status}>{status}</span>}
+    </form>
+  )
+}