basic routing

ui/frontend/build_src/src/App.tsx

@@ -0,0 +1,30 @@
+import {
+  Link,
+  MakeGenerics,
+  Outlet,
+  ReactLocation,
+  Router,
+  useMatch,
+} from "@tanstack/react-location";
+
+
+import Home from "./components/layouts/Home";
+import Settings from "./components/layouts/Settings";
+
+const location = new ReactLocation();
+
+
+function App() {
+  return (
+    <Router
+      location={location}
+      routes={[
+        {path: "/", element: <Home />},
+        {path: "settings", element: <Settings />},
+      ]}
+    >
+    </Router>
+  );
+}
+
+export default App;

ui/frontend/build_src/src/components/layouts/Home/index.tsx

@@ -6,19 +6,19 @@ import {
   CreateLayout,
   DisplayLayout,
   FooterLayout, // @ts-ignore
-} from "./app.css.ts";
+} from "./home.css.ts";
 
 import { useQuery } from "@tanstack/react-query";
-import { getSaveDirectory } from "../../api";
+import { getSaveDirectory } from "../../../api";
-import { useImageCreate } from "../../store/imageCreateStore";
+import { useImageCreate } from "../../../store/imageCreateStore";
 
 // Todo - import components here
-import HeaderDisplay from "../organisms/headerDisplay";
+import HeaderDisplay from "../../organisms/headerDisplay";
-import CreationPanel from "../organisms/creationPanel";
+import CreationPanel from "../../organisms/creationPanel";
-import DisplayPanel from "../organisms/displayPanel";
+import DisplayPanel from "../../organisms/displayPanel";
-import FooterDisplay from "../organisms/footerDisplay";
+import FooterDisplay from "../../organisms/footerDisplay";
 
-function App() {
+function Editor() {
   // Get the original save directory
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
   const { status, data } = useQuery(["SaveDir"], getSaveDirectory);
@@ -46,4 +46,4 @@ function App() {
   );
 }
 
-export default App;
+export default Editor;

ui/frontend/build_src/src/components/layouts/Settings/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Settings() {
+  return (
+    <div>
+      <h1>Settings</h1>
+    </div>
+  );
+}

ui/frontend/build_src/src/main.tsx

@@ -6,7 +6,10 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
-import App from "./components/layouts/App";
+import Editor from "./components/layouts/Home";
+
+import App from "./App";
+
 
 import "./styles.css.ts";