upd

2023-08-08 19:42:14 +05:00
parent b8816f1935
commit 12ca24ad6a
10 changed files with 263 additions and 217 deletions
@@ -0,0 +1,96 @@
+import useModalStore from "../../stores/useModalStore";
+import userAgentParser from "ua-parser-js";
+import AdminUserIcon from "../icons/AdminUserIcon";
+import DesktopIcon from "../icons/DesktopIcon";
+import ExitIcon from "../icons/ExitIcon";
+import HandOffIcon from "../icons/HandOffIcon";
+import HandOnIcon from "../icons/HandOnIcon";
+import MobilePhoneIcon from "../icons/MobilePhoneIcon";
+import UserIcon from "../icons/UserIcon";
+import CloseIcon from "../icons/CloseIcon";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface UsersManagementModalProps {
+  users: any[];
+  me: any;
+  handleUpdate: (socketId: string, params: any) => void;
+  handleKick: (socketId: string) => void;
+}
+
+function UsersManagementModal({
+  users,
+  me,
+  handleUpdate,
+  handleKick,
+}: UsersManagementModalProps) {
+  const [setModal] = useModalStore((state) => [state.setModal]);
+
+  return (
+    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px] flex flex-col gap-2">
+      {users.map((user: any, index: number) => (
+        <div key={index} className="relative">
+          <div className="flex items-center gap-2 text-white">
+            <div className="flex flex-col">
+              {user.admin ? <AdminUserIcon /> : <UserIcon />}
+
+              {me && me.id === user.id && (
+                <span className="text-[#73788C] text-sm">Вы</span>
+              )}
+            </div>
+
+            {new userAgentParser().getDevice().type !== "mobile" ? (
+              <DesktopIcon />
+            ) : (
+              <MobilePhoneIcon />
+            )}
+
+            <span className="text-sm">{user.city}</span>
+
+            {!user.admin && (
+              <>
+                {!user.allowControl ? (
+                  <button
+                    onClick={() =>
+                      handleUpdate(user.id, { allowControl: true })
+                    }
+                    className="outline-none"
+                  >
+                    <HandOffIcon />
+                  </button>
+                ) : (
+                  <button
+                    onClick={() =>
+                      handleUpdate(user.id, { allowControl: false })
+                    }
+                    className="outline-none"
+                  >
+                    <HandOnIcon />
+                  </button>
+                )}
+              </>
+            )}
+
+            {me && me.admin && !user.admin && (
+              <button
+                onClick={() => handleKick(user.id)}
+                className="outline-none"
+              >
+                <ExitIcon />
+              </button>
+            )}
+          </div>
+          <div className="relative"></div>
+        </div>
+      ))}
+
+      <button
+        onClick={() => setModal(null)}
+        className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
+      >
+        <CloseIcon />
+      </button>
+    </div>
+  );
+}
+
+export default UsersManagementModal;