58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { MdSettings, MdHome, MdQuestionAnswer } from 'react-icons/md';
|
|
import { ChakraProvider, Tabs, TabList, TabPanels, Tab, TabPanel, Icon, chakra } from '@chakra-ui/react';
|
|
|
|
import { MainTab } from '~/tabs/MainTab';
|
|
import { SettingsTab } from '~/tabs/SettingsTab';
|
|
|
|
import { Provider } from 'react-redux';
|
|
import { theme } from '~/theme';
|
|
import { persistSettings } from '~/features/settings/persistSettings';
|
|
import { setupStore } from '~/store';
|
|
import { Footer } from '~/components/Footer';
|
|
import { FaqTab } from '~/tabs/FaqTab';
|
|
|
|
// Private to this file only.
|
|
const store = setupStore();
|
|
|
|
export function AppRoot() {
|
|
useEffect(() => persistSettings(store), []);
|
|
|
|
return (
|
|
<ChakraProvider theme={theme}>
|
|
<Provider store={store}>
|
|
<Tabs flex={1} minH={0} display="flex" flexDir="column">
|
|
<TabList justifyContent="center">
|
|
<Tab>
|
|
<Icon as={MdHome} mr="1" />
|
|
<chakra.span>应用</chakra.span>
|
|
</Tab>
|
|
<Tab>
|
|
<Icon as={MdSettings} mr="1" />
|
|
<chakra.span>设置</chakra.span>
|
|
</Tab>
|
|
<Tab>
|
|
<Icon as={MdQuestionAnswer} mr="1" />
|
|
<chakra.span>答疑</chakra.span>
|
|
</Tab>
|
|
</TabList>
|
|
|
|
<TabPanels overflow="auto" minW={0} flexDir="column" flex={1} display="flex">
|
|
<TabPanel>
|
|
<MainTab />
|
|
</TabPanel>
|
|
<TabPanel flex={1} display="flex">
|
|
<SettingsTab />
|
|
</TabPanel>
|
|
<TabPanel>
|
|
<FaqTab />
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
|
|
<Footer />
|
|
</Provider>
|
|
</ChakraProvider>
|
|
);
|
|
}
|