Merge pull request #62 from Manav173/contact

Added a Contact Page [Issue No. #32]

app/contact/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Nav } from "@/components/Nav";
+import React, { useState } from "react";
+
+// Define the form schema using zod
+const formSchema = z.object({
+  name: z.string().nonempty("Name is required"),
+  email: z.string().email("Invalid email address"),
+  issue: z.string().max(500, {
+    message: "Describe your issue within 500 characters.",
+  }),
+});
+
+// Contact form component
+export default function Contact() {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      issue: ""
+    }
+  });
+
+  // Handle form submission
+  const handleSubmit = (values: z.infer<typeof formSchema>) => {
+    console.log(values);
+    // Handle form submission (e.g., send data to the server)
+    setIsSubmitted(true);
+    form.reset();
+    setTimeout(() => setIsSubmitted(false), 3000); // Hide notification after 3 seconds
+  };
+
+  return (
+    <div className="relative">
+      <Nav />
+      <main className="p-20 flex w-full flex-col items-center justify-between">
+        <p style={{ fontSize: "4rem", fontWeight: 800, padding: 20 }}>
+          Scrap<span style={{ backgroundColor: "#a8e4a0", borderRadius: "8px", padding: "0 0.5rem" }}>Quest</span>
+        </p>
+        <div className="flex w-full flex-col items-center p-10">
+          <p style={{ paddingTop: '20px', fontSize: '2rem' }}>Facing an Issue? Fill up the form below 👇</p>
+          <div className="flex min-h-screen w-full flex-col items-center justify-between" style={{ paddingTop: '20px', paddingLeft: '25px', paddingRight: '25px', paddingBottom: '25px' }}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="max-w-md w-full flex flex-col gap-4">
+              <div className="flex flex-col">
+                <label htmlFor="name" className="font-semibold">Full Name</label>
+                <input
+                  id="name"
+                  type="text"
+                  placeholder="John Doe"
+                  {...form.register("name")}
+                  className="p-2 border rounded text-black"
+                />
+                {form.formState.errors.name && (
+                  <p className="text-red-500">{form.formState.errors.name.message}</p>
+                )}
+              </div>
+
+              <div className="flex flex-col">
+                <label htmlFor="email" className="font-semibold">Email Address</label>
+                <input
+                  id="email"
+                  type="email"
+                  placeholder="[email protected]"
+                  {...form.register("email")}
+                  className="p-2 border rounded text-black"
+                />
+                {form.formState.errors.email && (
+                  <p className="text-red-500">{form.formState.errors.email.message}</p>
+                )}
+              </div>
+
+              <div className="flex flex-col">
+                <label htmlFor="issue" className="font-semibold">Issue</label>
+                <textarea
+                  id="issue"
+                  placeholder="Tell us a little bit about your issue in details here"
+                  className="p-2 border rounded resize-none text-black"
+                  {...form.register("issue")}
+                />
+                {form.formState.errors.issue && (
+                  <p className="text-red-500">{form.formState.errors.issue.message}</p>
+                )}
+              </div>
+
+              <button type="submit" className="p-2 bg-blue-500 text-white rounded"><b>SUBMIT</b></button>
+            </form>
+            {isSubmitted && (
+              <p className="mt-4 text-green-500">Form submitted successfully!</p>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

components/Contact.tsx

@@ -0,0 +1,17 @@
+"use client"
+import { useRouter } from "next/navigation";
+
+export default function Contact() {
+  const router = useRouter();
+
+  const handleNavigation = () => {
+    router.push('/contact');
+  };
+
+  return (
+
+      <button onClick={handleNavigation}type="button" className="text-white bg-[#24292F] hover:bg-[#24292F]/90 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mb-1 mr-2">
+        Go to Contact Page
+      </button>
+  );
+}

components/Nav.tsx

@@ -7,6 +7,7 @@ import {
   NavbarToggle,
 } from "flowbite-react";
 import Social from "./Social";
+import Contact from "./Contact";
 
 export function Nav() {
   return (
@@ -22,6 +23,7 @@ export function Nav() {
       </NavbarBrand>
       <NavbarToggle />
       <NavbarCollapse>
+        <Contact />
         <Social />
       </NavbarCollapse>
     </Navbar>