Add deleteUser btn

src/pages/Profile/components/ManageMember/ManageMember.tsx

@@ -0,0 +1,42 @@
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import {useContext, useState} from "react";
+import styles from "./ManageMember.module.css"
+import DeactivateMemberBtn from "./DeactivateMember/DeactivateMemberBtn.jsx";
+import ModifyRole from "./ModifyRole/ModifyRole.jsx";
+import { AuthContext, AuthContextType } from "../../../../contexts/Auth/AuthContext.js";
+import DeleteMemberBtn from "./DeleteMember/DeleteMemberBtn";
+import User from  "../../../../interfaces/user.interface";
+
+
+export default function ManageMember({ userToManage }: { userToManage: User }) {
+
+    const { user } = useContext(AuthContext) as AuthContextType;
+    const [open, setOpen] = useState(false);
+
+
+    return <>
+        <Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
+            <img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
+            <p>Gérer</p>
+        </Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${userToManage.name}`}>
+
+            {(user?.id != userToManage.id) ? (
+                <div className={styles.manageSection}>
+                    <h3>Désactiver le compte</h3>
+                    <DeactivateMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
+
+                    <h3>Supprimer le compte</h3>
+                    <DeleteMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
+                </div>
+            ) : null}
+
+            <div className={styles.manageSection}>
+                <h3>Modifier le rôle</h3>
+                <ModifyRole user={userToManage} />
+            </div>
+        </Modal>
+    </>
+}