90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import {
|
|
FiArrowLeftCircle,
|
|
FiBook,
|
|
FiBookmark,
|
|
FiEdit,
|
|
FiGlobe,
|
|
FiMail,
|
|
FiSearch,
|
|
FiUser,
|
|
} from 'react-icons/fi';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { actionIconClasses, tabClasses, textClasses } from 'styles';
|
|
import Applications from './components/Applications';
|
|
import Bookmarks from './components/Bookmarks';
|
|
import Categories from './components/Categories';
|
|
import Messages from './components/Messages';
|
|
import Personalization from './components/Personalization';
|
|
import SearchProviders from './components/SearchProviders';
|
|
import Themes from './components/Themes';
|
|
|
|
export function Settings() {
|
|
const { isMobile } = useCommonHooks();
|
|
const navigate = useNavigate();
|
|
return (
|
|
<Stack px={'2rem'}>
|
|
<Group gap={0}>
|
|
<ActionIcon
|
|
className={actionIconClasses.backButton}
|
|
classNames={actionIconClasses}
|
|
component='a'
|
|
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}`)}
|
|
>
|
|
<FiArrowLeftCircle />
|
|
</ActionIcon>
|
|
<Text className={textClasses.settingsTitle} classNames={textClasses}>
|
|
Settings
|
|
</Text>
|
|
</Group>
|
|
<Tabs
|
|
orientation={isMobile ? 'horizontal' : 'vertical'}
|
|
defaultValue={'personalization'}
|
|
className={tabClasses.settingsTabs}
|
|
classNames={tabClasses}
|
|
>
|
|
<Tabs.List>
|
|
<Tabs.Tab value='personalization'>
|
|
{isMobile ? <FiUser /> : 'Personal Info'}
|
|
</Tabs.Tab>
|
|
<Tabs.Tab value='messages'>{isMobile ? <FiMail /> : 'Messages'}</Tabs.Tab>
|
|
<Tabs.Tab value='applications'>
|
|
{isMobile ? <FiGlobe /> : 'Applications'}
|
|
</Tabs.Tab>
|
|
<Tabs.Tab value='bookmarks'>{isMobile ? <FiBookmark /> : 'Bookmarks'}</Tabs.Tab>
|
|
<Tabs.Tab value='bookmarksCategories'>
|
|
{isMobile ? <FiBook /> : 'Categories'}
|
|
</Tabs.Tab>
|
|
<Tabs.Tab value='themes'>{isMobile ? <FiEdit /> : 'Themes'}</Tabs.Tab>
|
|
<Tabs.Tab value='providers'>
|
|
{isMobile ? <FiSearch /> : 'Search Providers'}
|
|
</Tabs.Tab>
|
|
</Tabs.List>
|
|
<Tabs.Panel value='personalization'>
|
|
<Personalization />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='messages'>
|
|
<Messages />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='applications'>
|
|
<Applications />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='bookmarks'>
|
|
<Bookmarks />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='bookmarksCategories'>
|
|
<Categories />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='themes'>
|
|
<Themes />
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value='providers'>
|
|
<SearchProviders />
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
</Stack>
|
|
);
|
|
}
|
|
export default Settings;
|