106 lines
2.5 KiB
TypeScript
106 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import ReactDOM from "react-dom/client";
|
|
import { createBrowserRouter } from "react-router";
|
|
import { RouterProvider } from "react-router/dom";
|
|
import {
|
|
createTheme,
|
|
MantineProvider,
|
|
Input,
|
|
Paper,
|
|
Slider,
|
|
Image,
|
|
mergeThemeOverrides,
|
|
} from "@mantine/core";
|
|
import { Notifications } from "@mantine/notifications";
|
|
|
|
import { mantineTheme } from "./theme";
|
|
|
|
import "@mantine/core/styles.css";
|
|
import "@mantine/dates/styles.css";
|
|
import "@mantine/notifications/styles.css";
|
|
import "@mantine/charts/styles.css";
|
|
|
|
import { Dashboard, subsListLoader } from "./Dashboard";
|
|
import { SubOrderSets, subOrderSetsLoader } from "./SubOrderSets";
|
|
import { OrderSet, orderSetLoader, orderSetAction } from "./OrderSet";
|
|
import { UserContextProvider } from "./UserContext";
|
|
import { Header } from "./Header";
|
|
import { Profile, profileLoader } from "./Profile";
|
|
|
|
const theme = createTheme({
|
|
components: {
|
|
InputWrapper: Input.Wrapper.extend({
|
|
defaultProps: {
|
|
inputWrapperOrder: ["label", "input", "description", "error"],
|
|
mb: "xs",
|
|
},
|
|
}),
|
|
Paper: Paper.extend({
|
|
defaultProps: {
|
|
p: "sm",
|
|
shadow: "xs",
|
|
mb: "lg",
|
|
},
|
|
}),
|
|
Slider: Slider.extend({
|
|
vars: (theme) =>
|
|
({
|
|
root: {
|
|
"--slider-track-bg": theme.colors.gray[4],
|
|
},
|
|
}) as any,
|
|
}),
|
|
Image: Image.extend({
|
|
defaultProps: {
|
|
radius: "xs",
|
|
},
|
|
}),
|
|
},
|
|
});
|
|
|
|
const router = createBrowserRouter([
|
|
{
|
|
path: "/",
|
|
Component: Header,
|
|
children: [
|
|
{
|
|
path: "dashboard",
|
|
Component: Dashboard,
|
|
loader: subsListLoader,
|
|
},
|
|
{
|
|
path: "profile",
|
|
Component: Profile,
|
|
loader: profileLoader,
|
|
},
|
|
{
|
|
path: "orders/:username",
|
|
Component: SubOrderSets,
|
|
loader: subOrderSetsLoader,
|
|
},
|
|
{
|
|
path: "orders/:username/new",
|
|
Component: OrderSet,
|
|
},
|
|
{
|
|
path: "orders/:username/:set_id",
|
|
Component: OrderSet,
|
|
loader: orderSetLoader,
|
|
action: orderSetAction,
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
|
|
const mergedTheme = mergeThemeOverrides(mantineTheme, theme);
|
|
|
|
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
<React.StrictMode>
|
|
<MantineProvider defaultColorScheme="dark" theme={mergedTheme}>
|
|
<UserContextProvider>
|
|
<Notifications />
|
|
<RouterProvider router={router} />
|
|
</UserContextProvider>
|
|
</MantineProvider>
|
|
</React.StrictMode>,
|
|
);
|