Refactor React to use routing

interface/src/main.tsx

@@ -1,11 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.js'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HashRouter, Routes, Route } from 'react-router-dom';
+import './index.css';
 import { SettingsContextProvider } from './SettingsContext.js';
-
-const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
-
+import SettingsPage from './SettingsPage.js';
 const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
 
 const style = document.createElement("style");
@@ -19,10 +17,18 @@ style.innerHTML = `
 }`;
 document.head.appendChild(style);
 
+
+const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
+
 root.render(
   <React.StrictMode>
     <SettingsContextProvider>
-      <App />
+      <HashRouter>
+        <Routes>
+          <Route path="/settings" element={<SettingsPage standalone={true} />} />
+          <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
+        </Routes>
+      </HashRouter>
     </SettingsContextProvider>
   </React.StrictMode>,
 );