AddProject component

frontend/src/Components/AddProject.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { APIResponse, api } from "../API/API";
+import { NewProject, Project } from "../Types/goTypes";
+import InputField from "./InputField";
+import Logo from "../assets/Logo.svg";
+import Button from "./Button";
+
+/**
+ * Tries to add a project to the system
+ * @param props - Project name and description
+ * @returns {boolean} True if created, false if not
+ */
+function CreateProject(props: { name: string; description: string }): boolean {
+  const project: NewProject = {
+    name: props.name,
+    description: props.name,
+  };
+
+  let created = false;
+
+  api
+    .createProject(project, localStorage.getItem("accessToken") ?? "")
+    .then((response: APIResponse<Project>) => {
+      //vv_FOR DEBGUGGING_vv
+      console.log(localStorage.getItem("accessToken"));
+
+      if (response.success) {
+        created = true;
+      } else {
+        console.error("Could not add project");
+      }
+    })
+    .catch((error) => {
+      console.error("An error occurred during creation:", error);
+    });
+  return created;
+}
+
+/**
+ * Tries to add a project to the system
+ * @returns {JSX.Element} UI for project adding
+ */
+function AddProject(): JSX.Element {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  return (
+    <div className="flex flex-col h-fit w-screen items-center justify-center">
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
+        <form
+          className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
+          onSubmit={(e) => {
+            e.preventDefault();
+            CreateProject({ name: name, description: description });
+          }}
+        >
+          <img
+            src={Logo}
+            className="logo w-[7vw] mb-10 mt-10"
+            alt="TTIME Logo"
+          />
+          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
+            Create a new project
+          </h3>
+          <InputField
+            label="Name"
+            type="text"
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value);
+            }}
+          />
+          <InputField
+            label="Description"
+            type="text"
+            value={description}
+            onChange={(e) => {
+              setDescription(e.target.value);
+            }}
+          />
+          <div className="flex items-center justify-between">
+            <Button
+              text="Create"
+              onClick={(): void => {
+                return;
+              }}
+              type="submit"
+            />
+          </div>
+        </form>
+        <p className="text-center text-gray-500 text-xs"></p>
+      </div>
+    </div>
+  );
+}
+
+export default AddProject;