feat: fix help center page

app/components/help-center.tsx

@@ -1,9 +1,57 @@
 "use client";
 import * as React from "react";
+import { useState } from "react";
 import Select from "./selectOption";
 import Image from "next/image";
 
 function HelpCenter() {
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const form = event.currentTarget;
+    const email = (form.email as HTMLInputElement).value.trim();
+    const subject = (form.subject as HTMLSelectElement).value.trim();
+    const details = (form.details as HTMLTextAreaElement).value.trim();
+
+    if (!email || !subject || !details) {
+      alert("Please fill out all required fields.");
+      return;
+    }
+
+    alert("Form submitted successfully!");
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+
+      if (files && files.length > 0) {
+        setSelectedFiles(Array.from(files));
+      }
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragOver(false);
+    if (event.dataTransfer.files) {
+      const files = Array.from(event.dataTransfer.files) as File[];
+      setSelectedFiles((prevFiles) => [...prevFiles, ...files]);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
   return (
     <main className="relative">
       {/* <Navbar /> */}
@@ -12,7 +60,7 @@ function HelpCenter() {
         <div className="mx-auto">
           <h2 className="text-[24px]">Help Center</h2>
         </div>
-        <div className="flex md:flex-row flex-col justify-between mx-auto md:px-4 px-6 w-full md:w-[80%] mt-20">
+        <div className="flex md:flex-row flex-col justify-between mx-auto md:px-24 px-6 w-full md:w-[80%] mt-20">
           <div className=" md:w-[698px] w-full">
             <div className="text-start mb-16">
               <div className="w-full pb-5 border-b-[1px] border-[#382E56] mb-5">
@@ -23,7 +71,10 @@ function HelpCenter() {
                 our team will get back to you within 24-48 hours.
               </p>
             </div>
-            <form className="flex flex-col gap-y-10 text-start mb-20">
+            <form
+              className="flex flex-col gap-y-10 text-start mb-20"
+              onSubmit={handleSubmit}
+            >
               <div className="flex flex-col gap-y-5">
                 <label htmlFor="email">
                   Your email address <span className="text-[#FC8181]">*</span>
@@ -32,6 +83,7 @@ function HelpCenter() {
                   type="text"
                   placeholder="Your email address"
                   className="p-[16px] rounded-full bg-[#100827]"
+                  name="email"
                 />
               </div>
               <div className="flex flex-col gap-y-5">
@@ -52,6 +104,7 @@ function HelpCenter() {
                   rows={7}
                   placeholder="Write your message here…"
                   className="px-[16px] py-[12px] bg-[#100827] rounded-2xl"
+                  name="details"
                 />
                 <p className="text-[14px]">
                   To provide the best assistance, please include as much detail
@@ -62,11 +115,69 @@ function HelpCenter() {
               </div>
               <div className="flex flex-col gap-y-5">
                 <p>Attachments(Optional)</p>
-                <input
-                  type="upload"
-                  placeholder="Add file or drop files here"
-                  className="p-[16px] rounded-full bg-[#100827] text-center"
-                />
+                <div
+                  className="flex items-center justify-center w-full"
+                  onDragOver={handleDragOver}
+                  onDragLeave={handleDragLeave}
+                  onDrop={handleDrop}
+                >
+                  <label
+                    htmlFor="attachments"
+                    className={`flex flex-row items-center justify-center w-full h-[54px] rounded-full ${
+                      isDragOver ? "bg-blue-300" : "bg-[#100827]"
+                    } cursor-pointer px-4`}
+                  >
+                    <div className="flex flex-row items-center justify-center gap-3 overflow-hidden">
+                      <svg
+                        className="w-6 h-6 text-blue-500"
+                        aria-hidden="true"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          strokeWidth="1"
+                          stroke="currentColor"
+                          fill="none"
+                        />
+                        <line
+                          x1="12"
+                          y1="8"
+                          x2="12"
+                          y2="16"
+                          strokeWidth="1"
+                          stroke="currentColor"
+                        />
+                        <line
+                          x1="8"
+                          y1="12"
+                          x2="16"
+                          y2="12"
+                          strokeWidth="1"
+                          stroke="currentColor"
+                        />
+                      </svg>
+
+                      <p className="text-sm text-[#433B5A] truncate font-sans w-full">
+                        {selectedFiles.length > 0
+                          ? selectedFiles.map((file) => file.name).join(", ")
+                          : "Add file or drop files here"}
+                      </p>
+                    </div>
+
+                    <input
+                      id="attachments"
+                      type="file"
+                      className="hidden"
+                      multiple
+                      onChange={handleFileChange}
+                    />
+                  </label>
+                </div>
               </div>
               <button
                 type="submit"

app/components/selectOption.tsx

@@ -11,7 +11,8 @@ function SelectOption() {
     <select
       value={percentage || ""}
       onChange={handlePercentageChange}
-      className="p-[16px] bg-[#100827] rounded-3xl text-sm outline-none"
+      className="p-[16px] bg-[#100827] rounded-3xl text-sm outline-none border-r-8 border-[#100827]"
+      name="subject"
     >
       <option value="25%"></option>
       <option value="50%"></option>