created modals for: ending or quitting session and ending transaltion ;

2025-10-30 16:50:16 +05:00
parent e90cc37a9a
commit e5853615db
3 changed files with 128 additions and 0 deletions
@@ -0,0 +1,49 @@
+import ModalWrapper from "../ModalWrapper";
+import Button from "../ui/Button";
+import useModalStore from "../../store/modalStore";
+
+interface EndSessionModalProps {
+  onEndSession: () => void;
+}
+
+function EndSessionModal({ onEndSession }: EndSessionModalProps) {
+  const { setModal } = useModalStore();
+
+  function handleEndSession() {
+    onEndSession();
+    setModal(null);
+  }
+
+  return (
+    <ModalWrapper className="2xl:w-[21.667vw]">
+      <div className="flex flex-col items-center text-center">
+        <h2 className="title-m 2xl:mb-[0.556vw] 2xl:px-[2.5vw] mb-[2.222vw] px-[10vw]">
+          Точно хотите завершить сеанс?
+        </h2>
+        <p className="text-s text-[#CCCCCC] 2xl:mb-[1.667vw] mb-[3.889vw]">
+          Результаты будут сохранены
+        </p>
+        <div className="flex w-full 2xl:gap-[0.556vw] gap-[2.222vw]">
+          <Button
+            variant="primary"
+            size="medium"
+            className="flex-1"
+            onClick={() => setModal(null)}
+          >
+            Отмена
+          </Button>
+          <Button
+            variant="critical"
+            size="medium"
+            className="flex-1"
+            onClick={handleEndSession}
+          >
+            Завершить
+          </Button>
+        </div>
+      </div>
+    </ModalWrapper>
+  );
+}
+
+export default EndSessionModal;
@@ -0,0 +1,30 @@
+import ModalWrapper from "../ModalWrapper";
+import Button from "../ui/Button";
+import useModalStore from "../../store/modalStore";
+
+function EndTranslationModal() {
+  const { setModal } = useModalStore();
+
+  return (
+    <ModalWrapper className="2xl:w-[21.667vw] w-[86.667vw]">
+      <div className="flex flex-col items-center text-center">
+        <h2 className="title-m 2xl:mb-[0.556vw] 2xl:px-[2.5vw] mb-[2.222vw] px-[10vw]">
+          Трансляция завершилась
+        </h2>
+        <p className="text-s text-[#CCCCCC] 2xl:mb-[1.667vw] mb-[3.889vw]">
+          Но вы можете продолжить общение и подвести итоги встречи
+        </p>
+        <Button
+          variant="primary"
+          size="medium"
+          className="w-full"
+          onClick={() => setModal(null)}
+        >
+          Понятно
+        </Button>
+      </div>
+    </ModalWrapper>
+  );
+}
+
+export default EndTranslationModal;
@@ -0,0 +1,49 @@
+import ModalWrapper from "../ModalWrapper";
+import Button from "../ui/Button";
+import useModalStore from "../../store/modalStore";
+
+interface QuitSessionModalProps {
+  onQuitSession: () => void;
+}
+
+function QuitSessionModal({ onQuitSession }: QuitSessionModalProps) {
+  const { setModal } = useModalStore();
+
+  function handleQuitSession() {
+    onQuitSession();
+    setModal(null);
+  }
+
+  return (
+    <ModalWrapper className="2xl:w-[21.667vw]">
+      <div className="flex flex-col items-center text-center">
+        <h2 className="title-m 2xl:mb-[0.556vw] 2xl:px-[2.5vw] mb-[2.222vw] px-[10vw]">
+          Хотите выйти?
+        </h2>
+        <p className="text-s text-[#CCCCCC] 2xl:mb-[1.667vw] mb-[3.889vw]">
+          Результаты встречи будут сохранены
+        </p>
+        <div className="flex w-full gap-[0.556vw]">
+          <Button
+            variant="primary"
+            size="medium"
+            className="flex-1"
+            onClick={() => setModal(null)}
+          >
+            Остаться
+          </Button>
+          <Button
+            variant="critical"
+            size="medium"
+            className="flex-1"
+            onClick={handleQuitSession}
+          >
+            Выйти
+          </Button>
+        </div>
+      </div>
+    </ModalWrapper>
+  );
+}
+
+export default QuitSessionModal;