54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import Button from "./Button";
|
|
import DeleteUser from "./DeleteUser";
|
|
import UserProjectListAdmin from "./UserProjectListAdmin";
|
|
|
|
function UserInfoModal(props: {
|
|
isVisible: boolean;
|
|
username: string;
|
|
onClose: () => void;
|
|
}): JSX.Element {
|
|
if (!props.isVisible) return <></>;
|
|
|
|
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">
|
|
<p className="font-bold text-[30px]">{props.username}</p>
|
|
<Link to="/AdminChangeUserName">
|
|
<p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
|
|
(Change Username)
|
|
</p>
|
|
</Link>
|
|
<div>
|
|
<h2 className="font-bold text-[22px] mb-[20px]">
|
|
Member of these projects:
|
|
</h2>
|
|
<div className="pr-6 pl-6">
|
|
<UserProjectListAdmin />
|
|
</div>
|
|
</div>
|
|
<div className="items-center space-x-6 pr-6 pl-6">
|
|
<Button
|
|
text={"Delete"}
|
|
onClick={function (): void {
|
|
DeleteUser({ usernameToDelete: props.username });
|
|
}}
|
|
type="button"
|
|
/>
|
|
<Button
|
|
text={"Close"}
|
|
onClick={function (): void {
|
|
props.onClose();
|
|
}}
|
|
type="button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default UserInfoModal;
|