Commit 9b440e85 by asranov0003

feat: add blockapp tabs

parent d6224c0f
......@@ -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",
......
......@@ -56,6 +56,17 @@
"unlockDeviceTitle": "Разблокировка устройства",
"unlockDeviceDesc": "Вы уверены, что хотите продолжить?"
},
"blockapps": {
"allapps": "Все",
"allappsDesc": "Заблокированные приложения будет НЕДОСТУПНЫ в любое время. Разрешенные приложения всегда будут доступны для использования, даже если устройство заблокировано.",
"block": "Заблокировать",
"allow": "Разрешить",
"noFoundApps": "Приложения не найдены",
"blockedApps": "Заблокированные",
"allowedApps": "Разрешенные",
"unBlock": "Разблокировать",
"remove": "Убрать"
},
"session": {
"activeTill": "Активен до",
"noSubscription": "Нет подписки",
......
.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
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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment