Added search and some design changes

frontend/src/Components/ProjectListAdmin.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { NewProject } from "../Types/goTypes";
 import ProjectInfoModal from "./ProjectInfoModal";
 import MemberInfoModal from "./MemberInfoModal";
+import InputField from "./InputField";
 
 /**
  * A list of projects for admin manage projects page, that sets an onClick
@@ -21,6 +22,7 @@ export function ProjectListAdmin(props: {
   const [projectName, setProjectName] = useState("");
   const [userModalVisible, setUserModalVisible] = useState(false);
   const [username, setUsername] = useState("");
+  const [search, setSearch] = useState("");
 
   const handleClickUser = (username: string): void => {
     setUsername(username);
@@ -44,6 +46,7 @@ export function ProjectListAdmin(props: {
 
   return (
     <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Manage Projects</h1>
       {projectModalVisible && (
         <ProjectInfoModal
           onClose={handleCloseProject}
@@ -59,10 +62,24 @@ export function ProjectListAdmin(props: {
         />
       )}
       <div>
-        <ul className="font-bold underline text-[30px] cursor-pointer padding">
-          {props.projects.map((project) => (
+        <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] cursor-pointer overflow-auto h-[65vh] w-[50vw]">
+          {props.projects
+            .filter((project) => {
+              return search.toLowerCase() === ""
+                ? project.name
+                : project.name.toLowerCase().includes(search.toLowerCase());
+            })
+            .map((project) => (
               <li
-              className="pt-5"
+                className="hover:font-extrabold hover:underline p-1"
                 key={project.name}
                 onClick={() => {
                   handleClickProject(project.name);