A component for listing an array of users where every user gets a link, made for AdminManageUsers.tsx

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>
+  );
+}