mailer implemented

2026-07-23 04:26:57 +00:00 · 2023-06-21 14:11:16 +02:00
parent 5fd8b35762
commit b323d07d12
11 changed files with 220 additions and 56 deletions
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { handleEmailSubmit } from "@/handlers/formSubmitHandlers";
+import useContactForm from "@/hooks/useContactForm";
+
+const ContactForm = () => {
+  const { values, handleChange } = useContactForm();
+  const [responseMessage, setResponseMessage] = useState({
+    isSuccessful: false,
+    message: "",
+  });
+
+  console.log(responseMessage);
+
+  return (
+    <form
+      onSubmit={(e) => handleEmailSubmit(e, values, setResponseMessage)}
+      className="space-y-8"
+    >
+      <div>
+        <label
+          htmlFor="email"
+          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          Adresse e-mail
+        </label>
+        <input
+          value={values.email}
+          onChange={handleChange}
+          type="email"
+          id="email"
+          className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+          placeholder="nom@exemple.com"
+          required
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="subject"
+          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          Sujet
+        </label>
+        <input
+          value={values.subject}
+          onChange={handleChange}
+          type="text"
+          id="subject"
+          className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+          placeholder="Le motif de ma demande"
+          required
+        />
+      </div>
+      <div className="sm:col-span-2">
+        <label
+          htmlFor="message"
+          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          Votre message
+        </label>
+        <textarea
+          value={values.message}
+          onChange={handleChange}
+          id="message"
+          rows={6}
+          className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+          placeholder="Détaillez ici votre demande..."
+        ></textarea>
+      </div>
+      <button
+        type="submit"
+        className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-teal-600 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:text-white"
+      >
+        Send message
+      </button>
+    </form>
+  );
+};
+
+export default ContactForm;