58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import React, { useState, useMemo } from "react";
|
|
import BubbleChartIcon from "@material-ui/icons/BubbleChart";
|
|
import BrushIcon from "@material-ui/icons/Brush";
|
|
import NotificationsIcon from "@material-ui/icons/Notifications";
|
|
import { useTranslation } from "react-i18next";
|
|
import PageTitle from "../../components/common/PageTitle";
|
|
import NavigationButtons from "../../components/common/NavigationButtons";
|
|
import SystemContainer from "./system/SystemContainer";
|
|
import AppearanceContainer from "./appearance/AppearanceContainer";
|
|
import NotificationsContainer from "./notifications/NotificationsContainer";
|
|
|
|
const NavigationTabs = {
|
|
SYSTEM: "Settings.Navigation.System",
|
|
APPEARANCE: "Settings.Navigation.Appearance",
|
|
NOTIFICATIONS: "Settings.Navigation.Notifications"
|
|
};
|
|
|
|
const tabs = [
|
|
{
|
|
code: NavigationTabs.SYSTEM,
|
|
icon: BubbleChartIcon
|
|
},
|
|
{
|
|
code: NavigationTabs.APPEARANCE,
|
|
icon: BrushIcon
|
|
},
|
|
{
|
|
code: NavigationTabs.NOTIFICATIONS,
|
|
icon: NotificationsIcon
|
|
}
|
|
];
|
|
|
|
const SettingsContainer = () => {
|
|
const [tab, setTab] = useState(NavigationTabs.SYSTEM);
|
|
const { t } = useTranslation();
|
|
|
|
const navigationTabs = useMemo(
|
|
() => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
|
|
[t]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<PageTitle
|
|
text={t(tab)}
|
|
navigation={
|
|
<NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
|
|
}
|
|
/>
|
|
{tab === NavigationTabs.SYSTEM && <SystemContainer />}
|
|
{tab === NavigationTabs.APPEARANCE && <AppearanceContainer />}
|
|
{tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SettingsContainer;
|