refactor: excise App, inlude Router PE-5161

src/App.tsx → src/Router.tsx

@@ -1,15 +1,13 @@
-import "./App.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { GiftForm } from "./GiftForm";
 import { RouterPage } from "./components/RouterPage";
 import { useErrorMessage } from "./hooks/useErrorMessage";
 
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-
-function App() {
+export function Router() {
   const [errorMessage, setErrorMessage] = useErrorMessage();
 
-  const router = (
-    <Router basename={`${import.meta.env.BASE_URL}`}>
+  return (
+    <BrowserRouter basename={`${import.meta.env.BASE_URL}`}>
       <Routes>
         <Route
           path="/gift"
@@ -20,6 +18,12 @@ function App() {
             />
           }
         />
+        <Route
+          path="/redeem"
+          element={
+            <RouterPage page={<p>TODO</p>} errorMessage={errorMessage} />
+          }
+        />
         <Route
           path="/"
           element={
@@ -31,10 +35,6 @@ function App() {
           }
         />
       </Routes>
-    </Router>
+    </BrowserRouter>
   );
-
-  return router;
 }
-
-export default App;

src/index.css

@@ -34,3 +34,28 @@ input[type="number"] {
     background-color: var(--white);
   }
 }
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  font-family: Wavehaus-Book;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.ardrive-logo:hover {
+  filter: drop-shadow(0 0 2em var(--ardrive-red));
+}
+
+.alert {
+  margin: 1rem 0;
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  font-family: Wavehaus-Extra;
+  color: var(--ardrive-red);
+}

src/main.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
 import "./index.css";
+import { Router } from "./Router.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <Router />
   </React.StrictMode>,
 );

src/pages/RedeemPage.tsx

@@ -0,0 +1,7 @@
+export function RedeemPage() {
+  return (
+    <>
+      <p>TODO</p>
+    </>
+  );
+}