91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import {
|
|
Box,
|
|
DEFAULT_THEME,
|
|
MantineProvider,
|
|
createTheme,
|
|
mergeMantineTheme,
|
|
} from '@mantine/core';
|
|
import { useLocalStorage } from '@mantine/hooks';
|
|
import { ModalsProvider } from '@mantine/modals';
|
|
import { useEffect } from 'react';
|
|
import {
|
|
Route,
|
|
RouterProvider,
|
|
createBrowserRouter,
|
|
createRoutesFromElements,
|
|
} from 'react-router-dom';
|
|
import ThemeProvider from './components/ThemeProvider';
|
|
import { useQueryAPI } from './hooks/useAPI';
|
|
import Homepage from './pages/homepage/Homepage';
|
|
import Settings from './pages/settings/Settings';
|
|
import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
|
|
import '@mantine/dates/styles.css'; //if using mantine date picker features
|
|
import 'mantine-react-table/styles.css'; //import MRT styles
|
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
|
import { useAtom } from 'jotai';
|
|
import { appTheme } from './contexts/theme';
|
|
import './index.css';
|
|
|
|
function App() {
|
|
const { data, isFetched } = useQueryAPI({
|
|
endpoint: 'api/themes',
|
|
});
|
|
|
|
const [themeName, setThemeName] = useLocalStorage<any>({
|
|
key: 'theme',
|
|
defaultValue: 'blackboard',
|
|
});
|
|
|
|
const [theme, setTheme] = useAtom(appTheme);
|
|
useEffect(() => {
|
|
if (data && themeName) {
|
|
const temp = data.find((t: any) => t.name === themeName);
|
|
setTheme(temp);
|
|
}
|
|
}, [isFetched, themeName]);
|
|
|
|
const router = createBrowserRouter(
|
|
createRoutesFromElements(
|
|
<Route>
|
|
<Route path='/trigger' element={<Homepage theme={theme} />} />
|
|
<Route path='/trigger/settings' element={<Settings theme={theme} />} />
|
|
</Route>,
|
|
),
|
|
);
|
|
|
|
const overrides = createTheme({
|
|
white: theme?.backgroundColor,
|
|
fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
|
|
});
|
|
|
|
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
|
|
return (
|
|
<>
|
|
{theme && (
|
|
<MantineProvider theme={mantineTheme}>
|
|
<ThemeProvider theme={theme}>
|
|
<ModalsProvider>
|
|
<>
|
|
<Box
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
position: 'fixed',
|
|
background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(assets/backgrounds/${theme.backgroundImage})`,
|
|
backgroundSize: 'cover',
|
|
zIndex: -1,
|
|
}}
|
|
/>
|
|
<RouterProvider router={router} />
|
|
<ReactQueryDevtools initialIsOpen={false} />
|
|
</>
|
|
</ModalsProvider>
|
|
</ThemeProvider>
|
|
</MantineProvider>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|