upd

src/components/modals/UsersManagementModal.tsx

@@ -8,80 +8,86 @@ import HandOnIcon from "../icons/HandOnIcon";
 import MobilePhoneIcon from "../icons/MobilePhoneIcon";
 import UserIcon from "../icons/UserIcon";
 import CloseIcon from "../icons/CloseIcon";
+import useStreamUserStore from "../../stores/useStreamUserStore";
 
 /* 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]);
+  const [users] = useStreamUserStore((state) => [state.users]);
 
   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 />}
+      <div className="flex flex-col lg:gap-8 gap-4">
+        <p className="font-gilroy lg:text-2xl">Участники</p>
+        <div className="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="relative flex flex-col">
+                  {user.admin ? <AdminUserIcon /> : <UserIcon />}
+                </div>
 
-              {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>
+                {new userAgentParser(user.ua).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={() =>
-                      handleUpdate(user.id, { allowControl: false })
-                    }
+                    onClick={() => handleKick(user.id)}
                     className="outline-none"
                   >
-                    <HandOnIcon />
+                    <ExitIcon />
                   </button>
                 )}
-              </>
-            )}
 
-            {me && me.admin && !user.admin && (
-              <button
-                onClick={() => handleKick(user.id)}
-                className="outline-none"
-              >
-                <ExitIcon />
-              </button>
-            )}
-          </div>
-          <div className="relative"></div>
+                <div>
+                  {me && me.id === user.id && (
+                    <span className="text-[#73788C] text-xs">Вы</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
         </div>
-      ))}
+      </div>
 
       <button
         onClick={() => setModal(null)}