From e49552c3d7ff1e94a2e00c037db2a15cdb0db24f Mon Sep 17 00:00:00 2001
From: Sahil <shaikhsahil4883@gmail.com>
Date: Thu, 12 Sep 2024 22:52:17 +0530
Subject: [PATCH] contact form changed

---
 app/(All Pages)/contact/page.tsx | 236 ++++++++++++-------------------
 1 file changed, 93 insertions(+), 143 deletions(-)

diff --git a/app/(All Pages)/contact/page.tsx b/app/(All Pages)/contact/page.tsx
index 33a7bc2..037e68e 100644
--- a/app/(All Pages)/contact/page.tsx	
+++ b/app/(All Pages)/contact/page.tsx	
@@ -1,154 +1,104 @@
-import React from "react";
-import { Underdevelopment } from "@/Components/Underdevelopment";
-//TODO: Edit the contact form to suit our current requirement
-//TODO:Connect the form with backend service
-const Contact = () => {
-  return (
-    <section className="bg-gray-100">
-      <div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-x-16 gap-y-8 lg:grid-cols-5">
-          <div className="lg:col-span-2 lg:py-12">
-            <p className="max-w-xl text-lg">
-              At the same time, the fact that we are wholly owned and totally
-              independent from manufacturer and other group control gives you
-              confidence that we will only recommend what is right for you.
-            </p>
-
-            <div className="mt-8">
-              <a href="#" className="text-2xl font-bold text-pink-600">
-                {" "}
-                0151 475 4450{" "}
-              </a>
-
-              <address className="mt-2 not-italic">
-                282 Kevin Brook, Imogeneborough, CA 58517
-              </address>
-            </div>
-          </div>
-
-          <div className="rounded-lg bg-white p-8 shadow-lg lg:col-span-3 lg:p-12">
-            <form action="#" className="space-y-4">
-              <div>
-                <label className="sr-only" htmlFor="name">
-                  Name
-                </label>
-                <input
-                  className="w-full rounded-lg border-gray-200 p-3 text-sm"
-                  placeholder="Name"
-                  type="text"
-                  id="name"
-                />
-              </div>
-
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <div>
-                  <label className="sr-only" htmlFor="email">
-                    Email
-                  </label>
-                  <input
-                    className="w-full rounded-lg border-gray-200 p-3 text-sm"
-                    placeholder="Email address"
-                    type="email"
-                    id="email"
-                  />
-                </div>
-
-                <div>
-                  <label className="sr-only" htmlFor="phone">
-                    Phone
-                  </label>
-                  <input
-                    className="w-full rounded-lg border-gray-200 p-3 text-sm"
-                    placeholder="Phone Number"
-                    type="tel"
-                    id="phone"
-                  />
-                </div>
-              </div>
+"use client";
+import React, { useState } from "react";
 
-              <div className="grid grid-cols-1 gap-4 text-center sm:grid-cols-3">
-                <div>
-                  <label
-                    htmlFor="Option1"
-                    className="block w-full cursor-pointer rounded-lg border border-gray-200 p-3 text-gray-600 hover:border-black has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white"
-                    tabIndex={0}
-                  >
-                    <input
-                      className="sr-only"
-                      id="Option1"
-                      type="radio"
-                      tabIndex={-1}
-                      name="option"
-                    />
+interface FormData {
+  email: string;
+  phone: string;
+  message: string;
+}
 
-                    <span className="text-sm"> Option 1 </span>
-                  </label>
-                </div>
+const ContactForm: React.FC = () => {
+  const [formData, setFormData] = useState<FormData>({
+    email: "",
+    phone: "",
+    message: "",
+  });
 
-                <div>
-                  <label
-                    htmlFor="Option2"
-                    className="block w-full cursor-pointer rounded-lg border border-gray-200 p-3 text-gray-600 hover:border-black has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white"
-                    tabIndex={0}
-                  >
-                    <input
-                      className="sr-only"
-                      id="Option2"
-                      type="radio"
-                      tabIndex={-1}
-                      name="option"
-                    />
+  const [formSubmitted, setFormSubmitted] = useState(false);
 
-                    <span className="text-sm"> Option 2 </span>
-                  </label>
-                </div>
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
 
-                <div>
-                  <label
-                    htmlFor="Option3"
-                    className="block w-full cursor-pointer rounded-lg border border-gray-200 p-3 text-gray-600 hover:border-black has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white"
-                    tabIndex={0}
-                  >
-                    <input
-                      className="sr-only"
-                      id="Option3"
-                      type="radio"
-                      tabIndex={-1}
-                      name="option"
-                    />
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // Normally, you would handle form submission here (e.g., send the data to an API)
+    setFormSubmitted(true);
+  };
 
-                    <span className="text-sm"> Option 3 </span>
-                  </label>
-                </div>
-              </div>
+  if (formSubmitted) {
+    return <div className="text-green-500 font-semibold">Form submitted</div>;
+  }
 
-              <div>
-                <label className="sr-only" htmlFor="message">
-                  Message
-                </label>
-
-                <textarea
-                  className="w-full rounded-lg border-gray-200 p-3 text-sm"
-                  placeholder="Message"
-                  rows={8}
-                  id="message"
-                ></textarea>
-              </div>
-
-              <div className="mt-4">
-                <button
-                  type="submit"
-                  className="inline-block w-full rounded-lg bg-black px-5 py-3 font-medium text-white sm:w-auto"
-                >
-                  Send Enquiry
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="max-w-md mx-auto p-4 bg-white shadow-md rounded-lg"
+    >
+      <div className="mb-4">
+        <label
+          htmlFor="email"
+          className="block text-gray-700 font-semibold mb-2"
+        >
+          Email:
+        </label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+          className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="mb-4">
+        <label
+          htmlFor="phone"
+          className="block text-gray-700 font-semibold mb-2"
+        >
+          Phone Number:
+        </label>
+        <input
+          type="tel"
+          id="phone"
+          name="phone"
+          value={formData.phone}
+          onChange={handleChange}
+          required
+          className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="mb-4">
+        <label
+          htmlFor="message"
+          className="block text-gray-700 font-semibold mb-2"
+        >
+          Message:
+        </label>
+        <textarea
+          id="message"
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          required
+          className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
       </div>
-    </section>
+      <button
+        type="submit"
+        className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition-colors"
+      >
+        Submit
+      </button>
+    </form>
   );
 };
 
-export default Contact;
+export default ContactForm;