gear-orders/web/vite/src/main.tsx

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,
} from "@mantine/core";
import { Notifications } from "@mantine/notifications";

import "@mantine/core/styles.css";
import "@mantine/dates/styles.css";
import "@mantine/notifications/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,
    }),
  },
});

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,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <MantineProvider theme={theme}>
      <UserContextProvider>
        <Notifications />
        <RouterProvider router={router} />
      </UserContextProvider>
    </MantineProvider>
  </React.StrictMode>,
);