feat: add manage app modal

src/locales/en/en.json

@@ -49,8 +49,12 @@
     "usage": "Manage Usage",
     "blockUnwantedApps": "Block unwanted apps",
     "setTimeLimit": "Set phone usage time limit",
-    "lockDevice": "Lock device",
-    "unlockDevice": "Unlock device"
+    "lockDevice": "Block device",
+    "unlockDevice": "Unblock device",
+    "lockDeviceTitle": "Blocking device",
+    "lockDeviceDesc": "Are you sure you want to continue?",
+    "unlockDeviceTitle": "Unblocking device",
+    "unlockDeviceDesc": "Are you sure you want to continue?"
   },
   "session": {
     "activeTill": "Active till",

src/locales/ru/ru.json

@@ -50,7 +50,11 @@
     "blockUnwantedApps": "Блокировка нежелательных приложений",
     "setTimeLimit": "Установить ограничение по времени",
     "lockDevice": "Заблокировать устройство",
-    "unlockDevice": "Разблокировать устройство"
+    "unlockDevice": "Разблокировать устройство",
+    "lockDeviceTitle": "Блокировка устройства",
+    "lockDeviceDesc": "Вы уверены, что хотите продолжить?",
+    "unlockDeviceTitle": "Разблокировка устройства",
+    "unlockDeviceDesc": "Вы уверены, что хотите продолжить?"
   },
   "session": {
     "activeTill": "Активен до",

src/pages/ManageApps/ManageApps.css

@@ -29,4 +29,18 @@
 
 .manageapps__content__link p {
     font-size: 1.2rem;
+}
+
+.manageapps__modal__title {
+    text-align: center;
+}
+
+.manageapps__modal__desc {
+    margin-bottom: 0.5rem;
+}
+
+.manageapps__modal__actions {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
 }
\ No newline at end of file

src/pages/ManageApps/ManageApps.tsx

-import React from "react";
+import React, { useState } from "react";
 import "./ManageApps.css";
 import SectionHeader from "../../layouts/SectionHeader";
 import { LuShield } from "react-icons/lu";
@@ -9,10 +9,22 @@ import {
 } from "react-icons/io5";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import CModal from "../../components/CModal";
+import CButton from "../../components/CButton";
 
 const ManageApps: React.FC = () => {
+  const [isOpenLockDeviceModal, setIsOpenLockDeviceModal] = useState(false);
+  const [isOpenUnLockDeviceModal, setIsOpenUnLockDeviceModal] = useState(false);
   const { t } = useTranslation();
 
+  const handleModalLockDevice = () => {
+    setIsOpenLockDeviceModal((prev) => !prev);
+  };
+
+  const handleModalUnlockDevice = () => {
+    setIsOpenUnLockDeviceModal((prev) => !prev);
+  };
+
   return (
     <div className="manageapps wrapper">
       <SectionHeader to="/home" />
@@ -36,16 +48,70 @@ const ManageApps: React.FC = () => {
           <p>{t("manage.setTimeLimit")}</p>
         </Link>
 
-        <div className="manageapps__content__link">
+        <div
+          className="manageapps__content__link"
+          onClick={handleModalLockDevice}
+        >
           <IoLockClosedOutline className="manageapps__content__icon" />
           <p>{t("manage.lockDevice")}</p>
         </div>
 
-        <div className="manageapps__content__link">
+        <div
+          className="manageapps__content__link"
+          onClick={handleModalUnlockDevice}
+        >
           <IoLockOpenOutline className="manageapps__content__icon" />
           <p>{t("manage.unlockDevice")}</p>
         </div>
       </div>
+
+      <CModal
+        isOpen={isOpenLockDeviceModal}
+        onToggle={handleModalLockDevice}
+        content={
+          <div className="manageapps__modal">
+            <h3 className="manageapps__modal__title">
+              {t("manage.lockDeviceTitle")}
+            </h3>
+            <p className="manageapps__modal__desc">
+              {t("manage.lockDeviceDesc")}
+            </p>
+
+            <div className="manageapps__modal__actions">
+              <CButton
+                title={t("common.no")}
+                variant="danger"
+                onClick={handleModalLockDevice}
+              />
+              <CButton title={t("common.yes")} />
+            </div>
+          </div>
+        }
+      />
+
+      <CModal
+        isOpen={isOpenUnLockDeviceModal}
+        onToggle={handleModalUnlockDevice}
+        content={
+          <div className="manageapps__modal">
+            <h3 className="manageapps__modal__title">
+              {t("manage.unlockDeviceTitle")}
+            </h3>
+            <p className="manageapps__modal__desc">
+              {t("manage.unlockDeviceDesc")}
+            </p>
+
+            <div className="manageapps__modal__actions">
+              <CButton
+                title={t("common.no")}
+                variant="danger"
+                onClick={handleModalUnlockDevice}
+              />
+              <CButton title={t("common.yes")} />
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 };