82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import Homepage from "./pages/homepage/Homepage";
|
|
import {
|
|
MantineProvider,
|
|
DEFAULT_THEME,
|
|
createTheme,
|
|
mergeMantineTheme,
|
|
} from "@mantine/core";
|
|
import {
|
|
Route,
|
|
createBrowserRouter,
|
|
createRoutesFromElements,
|
|
RouterProvider,
|
|
} from "react-router-dom";
|
|
import Settings from "./pages/settings/Settings";
|
|
import { ModalsProvider } from "@mantine/modals";
|
|
import { useLocalStorage } from "@mantine/hooks";
|
|
import { useEffect, useState } from "react";
|
|
import { useQueryAPI } from "./hooks/useAPI";
|
|
import ThemeProvider from "./components/ThemeProvider";
|
|
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 { appTheme } from "./contexts/theme";
|
|
import { useAtom } from "jotai";
|
|
|
|
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?.colorbackground,
|
|
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 >
|
|
<RouterProvider router={router} />
|
|
</ModalsProvider>
|
|
</ThemeProvider>
|
|
</MantineProvider>
|
|
)}
|
|
</>
|
|
|
|
|
|
);
|
|
}
|
|
|
|
export default App; |