feat: use react-router for links and redirects

frontend/src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode, Suspense } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter, Route, Routes } from "react-router";
 import "./index.css";
@@ -13,19 +13,15 @@ import MiiPage from "./pages/mii.tsx";
 import SubmitPage from "./pages/submit.tsx";
 import IndexPage from "./pages/index.tsx";
 import ProfileSettingsPage from "./pages/settings.tsx";
-import Providers from "./components/provider.tsx";
-import Header from "./components/header.tsx";
-import Footer from "./components/footer.tsx";
+import { ProgressProvider } from "@bprogress/react";
+import LinkOutPage from "./pages/out.tsx";
+import Layout from "./layout.tsx";
 
 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
-		<Providers>
-			<Suspense fallback={<div>Loading header...</div>}>
-				<Header />
-			</Suspense>
-			{/* <AdminBanner /> */}
-			<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">
-				<BrowserRouter>
+		<BrowserRouter>
+			<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
+				<Layout>
 					<Routes>
 						<Route path="/" element={<IndexPage />} />
 						<Route path="/mii/:id" element={<MiiPage />} />
@@ -35,13 +31,13 @@ createRoot(document.getElementById("root")!).render(
 						</Route>
 						<Route path="/submit" element={<SubmitPage />} />
 						<Route path="/login" element={<LoginPage />} />
+						<Route path="/out" element={<LinkOutPage />} />
 						<Route path="/privacy" element={<PrivacyPage />} />
 						<Route path="/terms-of-service" element={<TermsOfServicePage />} />
 						<Route path="*" element={<NotFoundPage />} />
 					</Routes>
-				</BrowserRouter>
-			</main>
-			<Footer />
-		</Providers>
+				</Layout>
+			</ProgressProvider>
+		</BrowserRouter>
 	</StrictMode>,
 );