TriggerFrontend/src/pages/settings/Settings.tsx

import { ActionIcon, Group, ScrollArea, Stack, Tabs, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FaPaintBrush, FaRegListAlt } from 'react-icons/fa';
import {
	FiArrowLeftCircle,
	FiBookmark,
	FiGlobe,
	FiMail,
	FiMonitor,
	FiSearch,
	FiUser,
} from 'react-icons/fi';
import { useNavigate, useParams } from 'react-router-dom';
import { actionIconClasses, scrollAreaClasses, tabClasses, textClasses } from 'styles';
import Applications from './components/Applications/Applications';
import Bookmarks from './components/Bookmarks/Bookmarks';
import Messages from './components/Messages/Messages';
import Personalization from './components/Personalization/Personalization';
import SearchProviders from './components/Search/SearchProviders';
import ThemePlaylists from './components/Theming/ThemePlaylists';
import Themes from './components/Theming/Themes';
import WolClients from './components/WoL/WolClients';

export function Settings() {
	const { isMobile } = useCommonHooks();
	const navigate = useNavigate();
	const { tabValue } = useParams();
	return (
		<Stack h={'100%'} gap={0}>
			<Group gap={0} style={{ position: 'relative', paddingBottom: '1rem' }}>
				<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={tabValue ?? 'personalization'}
				className={tabClasses.settingsTabs}
				classNames={tabClasses}
				keepMounted={false}
				value={tabValue}
				h={isMobile ? undefined : '100%'}
				onChange={(value) =>
					navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
				}
			>
				<Tabs.List style={{ justifyContent: isMobile ? 'space-between' : undefined }}>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>
						{isMobile ? <FiUser /> : 'Personal Info'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='messages'>
						{isMobile ? <FiMail /> : 'Messages'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='applications'>
						{isMobile ? <FiGlobe /> : 'Applications'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarks'>
						{isMobile ? <FiBookmark /> : 'Bookmarks'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
						{isMobile ? <FaPaintBrush /> : 'Themes'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themePlaylists'>
						{isMobile ? <FaRegListAlt /> : 'Theme Playlists'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
						{isMobile ? <FiSearch /> : 'Search Providers'}
					</Tabs.Tab>
					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='wolClients'>
						{isMobile ? <FiMonitor /> : 'WoL Clients'}
					</Tabs.Tab>
				</Tabs.List>
				<Tabs.Panel value='personalization'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Personalization />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='messages'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Messages />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='applications'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Applications />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='bookmarks'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Bookmarks />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='themes'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<Themes />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='themePlaylists'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<ThemePlaylists />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='providers'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<SearchProviders />
					</ScrollArea>
				</Tabs.Panel>
				<Tabs.Panel value='wolClients'>
					<ScrollArea
						h={'100%'}
						className={scrollAreaClasses.default}
						classNames={scrollAreaClasses}
					>
						<WolClients />
					</ScrollArea>
				</Tabs.Panel>
			</Tabs>
		</Stack>
	);
}
export default Settings;