Merge pull request #66 from G-Techs/ft/migrate-addCategoryPage

feat: migrate AddCategory page and its all dependencies to TS

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.fontFamily": "'JetBrains Mono', 'monospace', monospace"
+}

components/AddCategoryPage/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useState } from "react";
+import AddCategory from "../modules/AddCategory";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const AddCategoryPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+
+  return (
+    <PageCard setIsTopNav={setIsTopNav}>
+      <AddCategory  />
+    </PageCard>
+  );
+};
+export default AddCategoryPage;

components/modules/AddCategory/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+const AddCategory = () => {
+  return (
+    <>
+      <div className="my-24 bg-white flex flex-col shadow-lg mr-5 rounded-xl pt-2">
+        <div className="flex justify-between items-center pb-5 border-b">
+          <h2 className="font-bold text-2xl text-gray-700 pl-5 pt-3">
+            Add Categories
+          </h2>
+        </div>
+        <form className="flex flex-col px-2 py-4 gap-2">
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="category-name" className="pb-2">
+              choose a name
+            </label>
+            <input
+              type="text"
+              name="category-name"
+              className="bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex flex-col px-2 ">
+            <label htmlFor="category-name" className="py-2">
+              Category Description:
+            </label>
+            <textarea
+              name="category-name"
+              cols={20}
+              rows={6}
+              className="bg-transparent border  px-3 transition-all py-4 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex capitalize right gap-4 px-2">
+            <button className="bg-primary w-20 px-2 py-2 rounded-xl text-white font-medium ">
+              submit
+            </button>
+            <button
+              type="reset"
+              className="bg-orange-600 w-20 px-2 py-2 rounded-xl text-white font-medium "
+            >
+              reset
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+
+export default AddCategory;

pages/admin/addcategory.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import AddCategoryPage from '../../components/AddCategoryPage'
+
+const addcategory = () => {
+  return (
+    <div className="bg-globalBg h-screen">
+        <AddCategoryPage/>
+    </div>
+  )
+
+};
+
+export default addcategory;