feat: add blockapp tabs

src/locales/en/en.json

@@ -56,6 +56,17 @@
     "unlockDeviceTitle": "Unblocking device",
     "unlockDeviceDesc": "Are you sure you want to continue?"
   },
+  "blockapps": {
+    "allapps": "All apps",
+    "allappsDesc": "Blocked apps will NOT be accessible at any time. Allowed apps will always be available to use, even if the device is blocked",
+    "block": "Block",
+    "allow": "Allow",
+    "noFoundApps": "No apps found",
+    "blockedApps": "Blocked apps",
+    "allowedApps": "Allowed apps",
+    "unBlock": "Unblock",
+    "remove": "Remove"
+  },
   "session": {
     "activeTill": "Active till",
     "noSubscription": "No subscription",

src/locales/ru/ru.json

@@ -56,6 +56,17 @@
     "unlockDeviceTitle": "Разблокировка устройства",
     "unlockDeviceDesc": "Вы уверены, что хотите продолжить?"
   },
+  "blockapps": {
+    "allapps": "Все",
+    "allappsDesc": "Заблокированные приложения будет НЕДОСТУПНЫ в любое время. Разрешенные приложения всегда будут доступны для использования, даже если устройство заблокировано.",
+    "block": "Заблокировать",
+    "allow": "Разрешить",
+    "noFoundApps": "Приложения не найдены",
+    "blockedApps": "Заблокированные",
+    "allowedApps": "Разрешенные",
+    "unBlock": "Разблокировать",
+    "remove": "Убрать"
+  },
   "session": {
     "activeTill": "Активен до",
     "noSubscription": "Нет подписки",

src/pages/BlockApps/BlockApps.css

+.blockapps__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0.5rem 0;
+}
+
+.blockapps__content__actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.blockapps__content__empty {
+    text-align: center;
+}
+
+.blockapps__tabs {
+    width: 95vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    padding: 0.5rem 0;
+}
+
+.blockapps__tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+}
+
+.blockapps__tabs .active {
+    color: var(--primary-color);
+}
\ No newline at end of file

src/pages/BlockApps/BlockApps.tsx

-import React from "react";
+import React, { useState } from "react";
 import "./BlockApps.css";
+import SectionHeader from "../../layouts/SectionHeader";
+import { LuWalletCards } from "react-icons/lu";
+import { GoLock, GoUnlock } from "react-icons/go";
+import CButton from "../../components/CButton";
+import { useTranslation } from "react-i18next";
 
 const BlockApps: React.FC = () => {
-  return <div>BlockApps</div>;
+  const [selectedTab, setSelectedTab] = useState<"all" | "blocked" | "allowed">(
+    "all"
+  );
+  const { t } = useTranslation();
+
+  const renderTabContent = () => {
+    switch (selectedTab) {
+      case "all":
+        return (
+          <div className="blockapps__content">
+            <h3 className="blockapps__content__title">
+              {t("blockapps.allapps")} (0)
+            </h3>
+            <p className="blockapps__content__desc">
+              {t("blockapps.allappsDesc")}
+            </p>
+
+            <div className="blockapps__content__actions">
+              <CButton title={t("blockapps.block")} disabled />
+              <CButton title={t("blockapps.allow")} disabled />
+            </div>
+
+            <div className="blockapps__content__empty">
+              <p>{t("blockapps.noFoundApps")}</p>
+            </div>
+
+            <div className="blockapps__content__apps"></div>
+          </div>
+        );
+      case "blocked":
+        return (
+          <div className="blockapps__content">
+            <h3 className="blockapps__content__title">
+              {t("blockapps.blockedApps")} (0)
+            </h3>
+
+            <div className="blockapps__content__actions">
+              <CButton title={t("blockapps.unBlock")} disabled />
+            </div>
+
+            <div className="blockapps__content__empty">
+              <p>{t("blockapps.noFoundApps")}</p>
+            </div>
+
+            <div className="blockapps__content__apps"></div>
+          </div>
+        );
+      case "allowed":
+        return (
+          <div className="blockapps__content">
+            <h3 className="blockapps__content__title">
+              {t("blockapps.allowedApps")} (0)
+            </h3>
+
+            <div className="blockapps__content__actions">
+              <CButton title={t("blockapps.remove")} disabled />
+            </div>
+
+            <div className="blockapps__content__empty">
+              <p>{t("blockapps.noFoundApps")}</p>
+            </div>
+
+            <div className="blockapps__content__apps"></div>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="blockapps wrapper">
+      <SectionHeader to="/home" />
+
+      <div>{renderTabContent()}</div>
+
+      <div className="blockapps__tabs">
+        <div
+          onClick={() => setSelectedTab("all")}
+          className={`blockapps__tab ${selectedTab === "all" ? "active" : ""}`}
+        >
+          <LuWalletCards />
+          <p>{t("blockapps.allapps")}</p>
+        </div>
+
+        <div
+          onClick={() => setSelectedTab("blocked")}
+          className={`blockapps__tab ${
+            selectedTab === "blocked" ? "active" : ""
+          }`}
+        >
+          <GoLock />
+          <p>{t("blockapps.blockedApps")}</p>
+        </div>
+
+        <div
+          onClick={() => setSelectedTab("allowed")}
+          className={`blockapps__tab ${
+            selectedTab === "allowed" ? "active" : ""
+          }`}
+        >
+          <GoUnlock />
+          <p>{t("blockapps.allowedApps")}</p>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default BlockApps;