started implementing form

UISS-SOLUTIONS · Jan 9, 2025 · 811c195 · 811c195
1 parent 38abe32
commit 811c195
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 34 deletions.
diff --git a/app/AdminPanel/AdminPages/Explore/page.tsx b/app/AdminPanel/AdminPages/Explore/page.tsx
@@ -1,40 +1,11 @@
 import React from "react";
 import TabHeader from "../../Components/header";
+import FormContainer from "@/app/components/form";
 
 const Explore = () => {
   return (
     <TabHeader title="Explore Page">
-      <form className="flex justify-center gap-2">
-        <div className="flex flex-col w-[90%]">
-          <label htmlFor="LandTitle" className="text-xl font-bold pt-5">
-            Land Page Title:
-          </label>
-          <input
-            type="text"
-            name="LandTitle"
-            id=""
-            className="py-1 px-2 text-lg focus:outline-none bg-secondary"
-            placeholder="Welcome Note"
-            value={"Welcome Note"}
-            disabled
-          />
-          <label htmlFor="Description" className="text-xl font-bold pt-3">
-            Land Page Description:
-          </label>
-          <textarea
-            name="Description"
-            id=""
-            className="p-2 resize-none focus:outline-none"
-            rows={6}
-          />
-          <button
-            type="submit"
-            className="text-xl px-4 py-1 bg-[#efb631] text-black font-bold rounded-lg w-fit mt-5 items-end"
-          >
-            Submit
-          </button>
-        </div>
-      </form>
+      <FormContainer/>
       <span className="flex text-4xl font-bold pb-2 border-b-2 border-black/20 pt-10">
         Section One
       </span>
@@ -59,7 +30,7 @@ const Explore = () => {
             className="p-2 resize-none focus:outline-none"
             rows={2}
           />
-           <label htmlFor="Description" className="flex text-xl font-bold pt-5">
+          <label htmlFor="Description" className="flex text-xl font-bold pt-5">
             Vision Description:
           </label>
           <textarea
@@ -76,7 +47,6 @@ const Explore = () => {
           </button>
         </div>
         <div className="w-[40%]">
-
           <label htmlFor="Description" className="flex text-xl font-bold pt-5">
             Mission Description:
           </label>
@@ -122,7 +92,7 @@ const Explore = () => {
             className="p-2 resize-none focus:outline-none"
             rows={4}
           />
-           <label htmlFor="LandTitle" className="text-xl font-bold pt-5">
+          <label htmlFor="LandTitle" className="text-xl font-bold pt-5">
             Core Value Title:
           </label>
           <input

diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -0,0 +1,61 @@
+"use client";
+import React, { useState } from "react";
+import { IFormContainer } from "./types";
+
+const FormContainer = () => {
+  const [formData, setFormData] = useState({});
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log(JSON.stringify(formData));
+  };
+  return (
+    <form
+      className="flex flex-col justify-center gap-2 items-center"
+      onSubmit={handleSubmit}
+    >
+      <div className="flex flex-col w-[90%]">
+        <label htmlFor="LandTitle" className="text-xl font-bold pt-5">
+          Land Page Title:
+        </label>
+        <input
+          type="text"
+          name="LandTitle"
+          id=""
+          className="py-1 px-2 text-lg focus:outline-none bg-secondary"
+          placeholder="Welcome Note"
+          value={"Welcome Note"}
+          disabled
+        />
+        <label htmlFor="Description" className="text-xl font-bold pt-3">
+          Land Page Description:
+        </label>
+        <textarea
+          name="Description"
+          id=""
+          className="p-2 resize-none focus:outline-none"
+          onChange={handleChange}
+          rows={6}
+        />
+      </div>
+      <button
+        type="submit"
+        className="text-xl px-4 py-1 bg-[#efb631] text-black font-bold rounded-lg w-fit mt-5 items-end"
+      >
+        Submit
+      </button>
+    </form>
+  );
+};
+
+export default FormContainer;
diff --git a/app/components/types.ts b/app/components/types.ts
@@ -30,4 +30,8 @@ export interface IDialog {
   dialogTitle: string;
   children: ReactNode;
   className: string;
+}
+
+export interface IFormContainer{
+  children: ReactNode;
 }