From e271794b57faf12b1635ddc6fde73adcb5784196 Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Wed, 20 Mar 2024 11:51:50 +0100
Subject: [PATCH] List for showing all projects as admin

---
 frontend/src/Components/ProjectListAdmin.tsx | 56 ++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/src/Components/ProjectListAdmin.tsx

diff --git a/frontend/src/Components/ProjectListAdmin.tsx b/frontend/src/Components/ProjectListAdmin.tsx
new file mode 100644
index 0000000..dbc7403
--- /dev/null
+++ b/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>
+    </>
+  );
+}