List for showing all projects as admin

frontend/src/Components/ProjectListAdmin.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { NewProject } from "../Types/goTypes";
+import ProjectInfoModal from "./ProjectInfoModal";
+
+/**
+ * A list of projects for admin manage projects page, that sets an onClick
+ * function for eact project <li> element, which displays a modul with
+ * user info.
+ * @param props - An array of projects to display
+ * @returns {JSX.Element} The project list
+ * @example
+ * const projects: NewProject[] = [{ name: "Project", description: "New" }];
+ * return <ProjectListAdmin projects={projects} />
+ */
+
+export function ProjectListAdmin(props: {
+  projects: NewProject[];
+}): JSX.Element {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [projectname, setProjectname] = useState("");
+
+  const handleClick = (username: string): void => {
+    setProjectname(username);
+    setModalVisible(true);
+  };
+
+  const handleClose = (): void => {
+    setProjectname("");
+    setModalVisible(false);
+  };
+
+  return (
+    <>
+      <ProjectInfoModal
+        onClose={handleClose}
+        isVisible={modalVisible}
+        projectname={projectname}
+      />
+      <div>
+        <ul className="font-bold underline text-[30px] cursor-pointer padding">
+          {props.projects.map((project) => (
+            <li
+              className="pt-5"
+              key={project.name}
+              onClick={() => {
+                handleClick(project.name);
+              }}
+            >
+              {project.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}