Implement custom 404 page

Author: JackTench

src/app/not-found.tsx

@@ -0,0 +1,10 @@
+import { PacmanLoader } from "react-spinners";
+
+export function NotFound() {
+  return (
+    <div className="flex h-screen flex-col items-center justify-center space-y-4">
+      <PacmanLoader color="#2196f3" />
+      <p>Not found.</p>
+    </div>
+  );
+}

src/router.tsx

@@ -1,12 +1,16 @@
 import { Converter } from "./app/converter";
 import { Home } from "./app/home";
+import { NotFound } from "./app/not-found";
 import { Route, Routes } from "react-router";
 
 export default function AppRouter() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/converter" element={<Converter />} />
+
+      {/* Fall back on app's 404 page. This is because of the SPA routing trick with 404.html used in GitHub Pages. */}
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 }