From e5853615db96eb18246cc2b27345931aaa245b98 Mon Sep 17 00:00:00 2001
From: C4rnivore <kirill.z13@mail.ru>
Date: Thu, 30 Oct 2025 16:50:16 +0500
Subject: [PATCH] created modals for: ending or quitting session and ending
 transaltion ;

---
 .../src/components/modals/EndSessionModal.tsx | 49 +++++++++++++++++++
 .../components/modals/EndTranslationModal.tsx | 30 ++++++++++++
 .../components/modals/QuitSessionModal.tsx    | 49 +++++++++++++++++++
 3 files changed, 128 insertions(+)
 create mode 100644 client/src/components/modals/EndSessionModal.tsx
 create mode 100644 client/src/components/modals/EndTranslationModal.tsx
 create mode 100644 client/src/components/modals/QuitSessionModal.tsx

diff --git a/client/src/components/modals/EndSessionModal.tsx b/client/src/components/modals/EndSessionModal.tsx
new file mode 100644
index 0000000..cf5f0c0
--- /dev/null
+++ b/client/src/components/modals/EndSessionModal.tsx
@@ -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;
diff --git a/client/src/components/modals/EndTranslationModal.tsx b/client/src/components/modals/EndTranslationModal.tsx
new file mode 100644
index 0000000..7e52198
--- /dev/null
+++ b/client/src/components/modals/EndTranslationModal.tsx
@@ -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;
diff --git a/client/src/components/modals/QuitSessionModal.tsx b/client/src/components/modals/QuitSessionModal.tsx
new file mode 100644
index 0000000..2304026
--- /dev/null
+++ b/client/src/components/modals/QuitSessionModal.tsx
@@ -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;