From 466c25a7c21b0a62199896c83bc747e50842b5e5 Mon Sep 17 00:00:00 2001
From: Peter KW <peter.k.w.96@gmail.com>
Date: Sat, 16 Mar 2024 02:16:06 +0100
Subject: [PATCH] A component for listing an array of users where every user
 gets a link, made for AdminManageUsers.tsx

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

diff --git a/frontend/src/Components/UserListAdmin.tsx b/frontend/src/Components/UserListAdmin.tsx
new file mode 100644
index 0000000..42fb094
--- /dev/null
+++ b/frontend/src/Components/UserListAdmin.tsx
@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom";
+import { User } from "../Types/Users";
+
+/**
+ * The props for the UserProps component
+ */
+interface UserProps {
+  users: User[];
+}
+
+/**
+ * A list of users for admin manage users page, that links admin to the right user page
+ * thanks to the state property
+ * @param props - The users to display
+ * @returns {JSX.Element} The user list
+ * @example
+ * const users = [{ id: 1, userName: "Random name" }];
+ * return <UserList users={users} />;
+ */
+
+export function UserListAdmin(props: UserProps): JSX.Element {
+  return (
+    <div>
+      <ul className="font-bold underline text-[30px] cursor-pointer padding">
+        {props.users.map((user) => (
+          <Link to="/admin-view-user" key={user.id} state={user.userName}>
+            <li className="pt-5" key={user.id}>
+              {user.userName}
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </div>
+  );
+}