New modal for member info

frontend/src/Components/MemberInfoModal.tsx

@@ -0,0 +1,77 @@
+import Button from "./Button";
+import DeleteUser from "./DeleteUser";
+import UserProjectListAdmin from "./UserProjectListAdmin";
+import { useState } from "react";
+import ChangeRoleView from "./ChangeRoleView";
+
+function MemberInfoModal(props: {
+  isVisible: boolean;
+  username: string;
+  onClose: () => void;
+}): JSX.Element {
+  const [showRoles, setShowRoles] = useState(false);
+  if (!props.isVisible) return <></>;
+
+  const handleChangeRole = (): void => {
+    if (showRoles) {
+      setShowRoles(false);
+    } else {
+      setShowRoles(true);
+    }
+  };
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
+      flex justify-center items-center"
+    >
+      <div className="border-4 border-black bg-white p-2 rounded-lg text-center flex flex-col">
+        <p className="font-bold text-[30px]">{props.username}</p>
+        <p
+          className="mb-[20px] hover:font-bold hover:cursor-pointer underline"
+          onClick={handleChangeRole}
+        >
+          (Change Role)
+        </p>
+        {showRoles && (
+          <ChangeRoleView
+            projectName={localStorage.getItem("projectName") ?? ""}
+            username={props.username}
+          />
+        )}
+        <div>
+          <h2 className="font-bold text-[22px] mb-[20px]">
+            Member of these projects:
+          </h2>
+          <div className="pr-6 pl-6">
+            <UserProjectListAdmin username={props.username} />
+          </div>
+        </div>
+        <div className="items-center space-x-6 pr-6 pl-6">
+          <Button
+            text={"Delete"}
+            onClick={function (): void {
+              if (
+                window.confirm("Are you sure you want to delete this user?")
+              ) {
+                DeleteUser({
+                  usernameToDelete: props.username,
+                });
+              }
+            }}
+            type="button"
+          />
+          <Button
+            text={"Close"}
+            onClick={function (): void {
+              setShowRoles(false);
+              props.onClose();
+            }}
+            type="button"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MemberInfoModal;