62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Drawer, Tabs, Title } from '@mantine/core';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { useConfigContext } from '../../config/provider';
|
|
import { useConfigStore } from '../../config/store';
|
|
|
|
import CommonSettings from './Common/CommonSettings';
|
|
import CustomizationSettings from './Customization/CustomizationSettings';
|
|
|
|
function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
|
|
const { t } = useTranslation('settings/common');
|
|
|
|
return (
|
|
<Tabs defaultValue="common">
|
|
<Tabs.List grow>
|
|
<Tabs.Tab value="common">{t('tabs.common')}</Tabs.Tab>
|
|
<Tabs.Tab value="customization">{t('tabs.customizations')}</Tabs.Tab>
|
|
</Tabs.List>
|
|
<Tabs.Panel data-autofocus value="common">
|
|
<CommonSettings />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value="customization">
|
|
<CustomizationSettings />
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
interface SettingsDrawerProps {
|
|
opened: boolean;
|
|
closeDrawer: () => void;
|
|
}
|
|
|
|
export function SettingsDrawer({
|
|
opened,
|
|
closeDrawer,
|
|
newVersionAvailable,
|
|
}: SettingsDrawerProps & { newVersionAvailable: string }) {
|
|
const { t } = useTranslation('settings/common');
|
|
const { config, name: configName } = useConfigContext();
|
|
const { updateConfig } = useConfigStore();
|
|
|
|
return (
|
|
<Drawer
|
|
size="xl"
|
|
padding="lg"
|
|
position="right"
|
|
title={<Title order={5}>{t('title')}</Title>}
|
|
opened={opened}
|
|
onClose={() => {
|
|
closeDrawer();
|
|
if (!configName || !config) {
|
|
return;
|
|
}
|
|
|
|
updateConfig(configName, (_) => config, false, true);
|
|
}}
|
|
>
|
|
<SettingsMenu newVersionAvailable={newVersionAvailable} />
|
|
</Drawer>
|
|
);
|
|
}
|