pygmalion-web-frontend/src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";

import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";

import {
    ChakraProvider,
} from "@chakra-ui/react";

import "./index.css";

import theme from "./themes/defaultTheme";

import Root, { loader as rootLoader } from "./routes/root";
import ErrorPage from "./error-page";
import About from "./routes/about";
import Search from "./routes/search";
import Create from "./routes/create";
import Chat, {
    loader as characterLoader,
} from "./routes/chat";

const router = createBrowserRouter([
    {
        path: "/",
        element: <Root />,
        errorElement: <ErrorPage />,
        loader: rootLoader
    },
    {
        path: "/search",
        element: <Search />,
        errorElement: <ErrorPage />
    },
    {
        path: "/about",
        element: <About />,
        errorElement: <ErrorPage />
    },
    {
        path: "/create",
        element: <Create />,
        errorElement: <ErrorPage />
    },
    {
        path: "/chat/:char",
        element: <Chat />,
        errorElement: <ErrorPage />,
        loader: characterLoader,
    }
]);

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <RouterProvider router={router} />
        </ChakraProvider>
    </React.StrictMode>
);