add routes + 404

src/App.tsx

@@ -1,9 +1,10 @@
-import { Routes, Route, Link } from 'react-router-dom'
+import { Routes, Route } from 'react-router-dom'
 
 import MainPage from './pages/index';
 import PrivacyPage from './pages/privacy';
 import MusicWidget from './pages/music';
 import LinksPage from './pages/links';
+import NotFound from './pages/NotFound';
 
 import './assets/main.css'
 
@@ -12,43 +13,9 @@ export default function App() {
     <Routes>
       <Route path="/" element={<MainPage />} />
       <Route path="/privacy" element={<PrivacyPage />} />
-      <Route path="*" element={<div>404 Not Found</div>} />
+      <Route path="/music" element={<MusicWidget />} />
+      <Route path="/links" element={<LinksPage />} />
+      <Route path="*" element={<NotFound />} />
     </Routes>
   )
 }
-
-// import ReactDOM from 'react-dom/client'
-// import {
-//   createBrowserRouter,
-//   RouterProvider
-// } from "react-router-dom"
-// import './assets/main.css'
-
-// // pages
-// import MainPage from './pages/index';
-// import PrivacyPage from './pages/privacy';
-// import MusicWidget from './pages/music';
-// import LinksPage from './pages/links';
-
-// // const router = createBrowserRouter([
-// //   {
-// //     path: '/',
-// //     element: <MainPage />
-// //   },
-// //   {
-// //     path: '/privacy',
-// //     element: <PrivacyPage />
-// //   },
-// //   {
-// //     path: '/music',
-// //     element: <MusicWidget />
-// //   },
-// //   {
-// //     path: '/links',
-// //     element: <LinksPage />
-// //   }
-// // ])
-
-// // ReactDOM.createRoot(document.getElementById('root')!).render(
-// //   <RouterProvider router={router} />
-// // )

src/pages/NotFound.tsx

@@ -0,0 +1,14 @@
+import Layout from "../components/Layout";
+export default function NotFound() {
+    return (
+        <Layout>
+            <div className="min-h-screen flex justify-center items-center">
+                <div className="text-center pb-28">
+                    <h1 className="text-2xl font-bold">well that sucks</h1>
+                    <p>that page doesn't exist. skill issue</p>
+                    <a href="#" className="underline" onClick={() => history.back()}>go back?</a>
+                </div>
+            </div>
+        </Layout>
+    )
+}