Search and design changes

frontend/src/Components/UserListAdmin.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import UserInfoModal from "./UserInfoModal";
+import InputField from "./InputField";
 
 /**
  * A list of users for admin manage users page, that sets an onClick
@@ -15,6 +16,7 @@ import UserInfoModal from "./UserInfoModal";
 export function UserListAdmin(props: { users: string[] }): JSX.Element {
   const [modalVisible, setModalVisible] = useState(false);
   const [username, setUsername] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleClick = (username: string): void => {
     setUsername(username);
@@ -28,24 +30,39 @@ export function UserListAdmin(props: { users: string[] }): JSX.Element {
 
   return (
     <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Manage Users</h1>
       <UserInfoModal
         onClose={handleClose}
         isVisible={modalVisible}
         username={username}
       />
       <div>
-        <ul className="font-bold underline text-[30px] cursor-pointer padding">
-          {props.users.map((user) => (
-            <li
-              className="pt-5"
-              key={user}
-              onClick={() => {
-                handleClick(user);
-              }}
-            >
-              {user}
-            </li>
-          ))}
+        <InputField
+          placeholder={"Search"}
+          type={"Text"}
+          value={search}
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+        />
+        <ul className="mt-3 border-2 text-left border-black rounded-2xl px-2 divide-y divide-gray-300 font-semibold text-[30px] transition-all cursor-pointer overflow-auto h-[65vh] w-[50vw]">
+          {props.users
+            .filter((user) => {
+              return search.toLowerCase() === ""
+                ? user
+                : user.toLowerCase().includes(search.toLowerCase());
+            })
+            .map((user) => (
+              <li
+                className="hover:font-extrabold hover:underline p-1"
+                key={user}
+                onClick={() => {
+                  handleClick(user);
+                }}
+              >
+                {user}
+              </li>
+            ))}
         </ul>
       </div>
     </>