Feat: Contact Us

kurianbenoy · Mar 13, 2024 · 7998f29 · 7998f29
1 parent e796c61
commit 7998f29
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 22 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@formspree/react": "^2.5.1",
     "@tabler/icons-react": "^2.47.0",
     "@vercel/analytics": "^1.2.2",
     "@wavesurfer/react": "^1.0.4",

diff --git a/ui/src/components/Dropdown.js b/ui/src/components/Dropdown.js
@@ -25,7 +25,9 @@ export default function Dropdown({
   return (
     <div className="flex flex-col ">
       <label className="font-medium text-wrap my-0">{label}:</label>
-      <p className=" text-xs text-red-700 mt-[-5px]">Required</p>
+      <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+        Required
+      </p>
 
       <select
         aria-label="Select Target Language"

diff --git a/ui/src/components/Header.jsx b/ui/src/components/Header.jsx
@@ -4,9 +4,40 @@ import { useEffect, useState } from "react";
 import { transitionToCollection } from "@components/utils";
 import PrimaryBtn from "./PrimaryBtn";
 
+function Buttons({ isHome }) {
+  const router = useRouter();
+  if (isHome) {
+    return (
+      <div className="flex flex-wrap gap-4">
+        <PrimaryBtn accent={true} fn={() => router.push("/about")}>
+          Team
+        </PrimaryBtn>
+        <PrimaryBtn accent={true} fn={() => router.push("/livetranscribe")}>
+          Live Transcription
+        </PrimaryBtn>
+        <PrimaryBtn
+          accent={true}
+          fn={() => router.push("/blog/terms-and-licenses")}
+        >
+          Terms & Licenses
+        </PrimaryBtn>
+        <SecondaryBtn fn={() => transitionToCollection(router)}>
+          Dashboard
+        </SecondaryBtn>
+      </div>
+    );
+  }
+  if (router.pathname !== "/contact") {
+    console.log(router);
+    return (
+      <div className="max-w-fit">
+        <PrimaryBtn fn={() => router.push("/contact")}>Contact Us</PrimaryBtn>
+      </div>
+    );
+  }
+}
 export default function Header() {
   const router = useRouter();
-
   const isHome = router.pathname === "/";
   function scrollToTop() {
     if (isHome) {
@@ -18,6 +49,7 @@ export default function Header() {
       router.push("/");
     }
   }
+
   return (
     <header
       className={`
@@ -33,26 +65,7 @@ export default function Header() {
           Indic Subtitler
         </h1>
       </div>
-
-      {isHome && (
-        <div className="flex flex-wrap gap-4 ">
-          <PrimaryBtn accent={true} fn={() => router.push("/about")}>
-            Team
-          </PrimaryBtn>
-          <PrimaryBtn accent={true} fn={() => router.push("/livetranscribe")}>
-            Live Transcription
-          </PrimaryBtn>
-          <PrimaryBtn
-            accent={true}
-            fn={() => router.push("/blog/terms-and-licenses")}
-          >
-            Terms & Licenses
-          </PrimaryBtn>
-          <SecondaryBtn fn={() => transitionToCollection(router)}>
-            Dashboard
-          </SecondaryBtn>
-        </div>
-      )}
+      <Buttons isHome={isHome} />
     </header>
   );
 }
diff --git a/ui/src/components/home/Footer.jsx b/ui/src/components/home/Footer.jsx
@@ -32,6 +32,9 @@ export default function Footer() {
             <li>
               <Link href="/about">About us</Link>
             </li>
+            <li>
+              <Link href="/contact">Contact us</Link>
+            </li>
           </ul>
         </div>
       </section>

diff --git a/ui/src/pages/contact.js b/ui/src/pages/contact.js
@@ -0,0 +1,110 @@
+import PrimaryBtn from "@components/components/PrimaryBtn";
+import { ValidationError, useForm } from "@formspree/react";
+import Image from "next/image";
+import React from "react";
+
+function FeebackForm() {
+  const [state, handleSubmit] = useForm("xvoeqldl");
+  if (state.succeeded) {
+    return (
+      <div className="h-[400px] flex items-center ">
+        <h1 className="md:text-2xl text-xl text-center w-full font-medium mt-[-50px]">
+          Form Submitted Successfully!
+        </h1>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <h1 className="text-xl">Submit a form </h1>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-5 my-4">
+        <div className="flex w-full  justify-between md:flex-row flex-col">
+          <span>
+            <label className="" htmlFor="name">
+              Full Name
+            </label>
+            <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+              Required
+            </p>
+          </span>
+          <input
+            required
+            type="text"
+            id="name"
+            name="name"
+            placeholder="Enter your full name"
+            className="border-2 rounded-md md:w-[60%] px-2 py-1"
+          />
+        </div>
+        <div className="flex md:flex-row flex-col w-full  justify-between">
+          <span>
+            <label htmlFor="email">Email Address</label>{" "}
+            <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+              Required
+            </p>
+          </span>
+          <input
+            required
+            id="email"
+            type="email"
+            name="email"
+            placeholder="Enter your Email Id"
+            className="border-2 rounded-md md:w-[60%] px-2 py-1"
+          />
+        </div>
+        <ValidationError prefix="Email" field="email" errors={state.errors} />
+        <div className="flex w-full  justify-between md:flex-row flex-col">
+          <span>
+            <label htmlFor="message">Message</label>{" "}
+            <p className=" text-[#f04b4b] font-semibold text-xs mt-[-5px]">
+              Required
+            </p>
+          </span>
+
+          <textarea
+            id="message"
+            name="message"
+            required
+            className="border-2 rounded-md md:w-[60%] h-36 px-2 py-1 resize-none"
+            placeholder="Enter your valuable message"
+          />
+        </div>
+        <ValidationError
+          prefix="Message"
+          field="message"
+          errors={state.errors}
+        />
+        <button
+          type="submit"
+          className="w-max bg-primary-900  text-white px-6 py-1 font-medium rounded-md md:text-lg self-end "
+          disabled={state.submitting}
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default function contact() {
+  return (
+    <section
+      className=" lg:w-[50%] md:w-[70%] md:mx-auto mx-4 flex flex-col justify-center  px-4
+      shadow-[rgba(0,_0,_0,_0.24)_0px_3px_8px] mt-14
+    "
+    >
+      <p className="text-center mt-6">
+        Faced a bug? Raise an issue now on{" "}
+        <a
+          href="https://github.com/kurianbenoy/Indic-Subtitler/issues"
+          className="font-medium underline underline-offset-4"
+          target="_blank"
+        >
+          Github
+        </a>
+      </p>
+      <div className="divider">OR</div>
+      <FeebackForm />
+    </section>
+  );
+}