upd

2023-08-10 14:05:56 +05:00
parent 12ca24ad6a
commit 1dac8116fb
12 changed files with 395 additions and 175 deletions
@@ -1,15 +1,14 @@
-import { Trans } from "react-i18next";
 import LogoIcon from "./icons/LogoIcon";
 import LogoMobileIcon from "./icons/LogoMobileIcon";
 import i18n from "../i18n";
-import useSidebarStore from "../stores/useSidebarStore";
+// import useSidebarStore from "../stores/useSidebarStore";

 interface HeaderProps {
  handleChangeLang: (lang: string) => void;
 }

 function Header({ handleChangeLang }: HeaderProps) {
-  const [setIsOpen] = useSidebarStore((state) => [state.setIsOpen]);
+  // const [setIsOpen] = useSidebarStore((state) => [state.setIsOpen]);

  return (
    <header className="sm:py-6 py-4 flex justify-between">
@@ -20,18 +19,6 @@ function Header({ handleChangeLang }: HeaderProps) {
        <LogoMobileIcon />
      </a>
      <div className="flex sm:gap-8 gap-2">
-        <button
-          onClick={() => setIsOpen(true)}
-          className="group relative sm:px-8 px-6 py-2 bg-gradient rounded-full lg:text-base text-sm font-medium leading-normal"
-        >
-          <div className="absolute top-0 left-0 w-full h-full rounded-full bg-black opacity-0 group-hover:opacity-10 transition-all"></div>
-          <span className="relative">
-            <Trans i18nKey={"header.buttonFirst"}>Записаться</Trans>{" "}
-            <span className="sm:inline hidden">
-              <Trans i18nKey={"header.buttonSecond"}>на демонстрацию</Trans>
-            </span>
-          </span>
-        </button>
        <div className="flex gap-1">
          <button
            className={[
@@ -0,0 +1,30 @@
+function AlertIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Icon/Alert">
+        <path
+          id="Ellipse 224"
+          d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 10.8181 3.23279 9.64778 3.68508 8.55585C4.13738 7.46392 4.80031 6.47177 5.63604 5.63604C6.47177 4.80031 7.46392 4.13738 8.55585 3.68508C9.64778 3.23279 10.8181 3 12 3C13.1819 3 14.3522 3.23279 15.4442 3.68508C16.5361 4.13738 17.5282 4.80031 18.364 5.63604C19.1997 6.47177 19.8626 7.46392 20.3149 8.55585C20.7672 9.64778 21 10.8181 21 12L21 12Z"
+          stroke="#F2F2F2"
+          strokeWidth="2"
+        />
+        <path
+          id="Vector 1834"
+          d="M12 7V13"
+          stroke="#F2F2F2"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+        <circle id="Ellipse 225" cx="12" cy="17" r="1" fill="#F2F2F2" />
+      </g>
+    </svg>
+  );
+}
+
+export default AlertIcon;
@@ -4,6 +4,7 @@ import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import useModalStore from "../../stores/useModalStore";
 import CloseIcon from "../icons/CloseIcon";
+import AlertIcon from "../icons/AlertIcon";

 function ShareModal() {
  const [setModal] = useModalStore((state) => [state.setModal]);
@@ -11,14 +12,15 @@ function ShareModal() {

  function toastInfo(text: string) {
    toast.info(text, {
-      position: "bottom-right",
-      autoClose: 5000,
-      hideProgressBar: false,
+      position: "top-center",
+      autoClose: 2000,
+      hideProgressBar: true,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
-      progress: undefined,
      theme: "dark",
+      icon: <AlertIcon />,
+      closeButton: false,
    });
  }

@@ -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)}