import React from 'react'; import { useRecoilState } from 'recoil'; import { Tabs, Tab, makeStyles } from '@material-ui/core'; import { Build as BuildIcon, Dvr as DvrIcon, Settings as SettingsIcon, } from '@material-ui/icons'; import { globalText } from '../../helpers/static-text'; import { selectedTabState } from '../../store'; import ModsPage from '../Mods'; import SettingsPage from '../Settings'; import LogsPage from '../Logs'; const useTabStyles = makeStyles({ root: { minHeight: 0, }, wrapper: { flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'flex-start', }, }); type Tab = { name: string; component: typeof ModsPage; icon: typeof BuildIcon; color?: 'primary' | 'secondary'; }; export const tabList: readonly Tab[] = [ { name: globalText.tabs.mods, component: ModsPage, icon: BuildIcon, }, { name: globalText.tabs.logs, component: LogsPage, icon: DvrIcon, }, { name: globalText.tabs.settings, component: SettingsPage, icon: SettingsIcon, }, ] as const; const AppTabs = () => { const tabStyles = useTabStyles(); const [selectedTab, setSelectedTab] = useRecoilState(selectedTabState); return ( <Tabs value={selectedTab}> {tabList.map((tab: Tab, index: number) => ( <Tab key={tab.name} label={tab.name} value={index} classes={tabStyles} icon={<tab.icon color={tab.color} />} onClick={() => setSelectedTab(index)} /> ))} </Tabs> ); }; export default AppTabs;