chore: set up routing with mock pages

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-router-dom:
+    specifier: ^6.22.3
+    version: 6.22.3(react-dom@18.2.0)(react@18.2.0)
 
 devDependencies:
   '@types/react':
@@ -402,6 +405,11 @@ packages:
     dev: true
     optional: true
 
+  /@remix-run/router@1.15.3:
+    resolution: {integrity: sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
   /@rollup/rollup-android-arm-eabi@4.14.3:
     resolution: {integrity: sha512-X9alQ3XM6I9IlSlmC8ddAvMSyG1WuHk5oUnXGw+yUBs3BFoTizmG1La/Gr8fVJvDWAq+zlYTZ9DBgrlKRVY06g==}
     cpu: [arm]
@@ -1837,6 +1845,29 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-router-dom@6.22.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.15.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-router: 6.22.3(react@18.2.0)
+    dev: false
+
+  /react-router@6.22.3(react@18.2.0):
+    resolution: {integrity: sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.15.3
+      react: 18.2.0
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}

src/app.tsx

@@ -1,3 +1,5 @@
+import { Router } from "./router";
+
 export function App() {
-  return <h1 className="text-3xl font-bold underline">hello, world!</h1>;
+  return <Router />;
 }

src/pages/episode.tsx

@@ -0,0 +1,3 @@
+export function Episode() {
+  return <h1>Episode page</h1>;
+}

src/pages/home.tsx

@@ -0,0 +1,3 @@
+export function Home() {
+  return <h1>Home page</h1>;
+}

src/pages/podcast.tsx

@@ -0,0 +1,3 @@
+export function Podcast() {
+  return <h1>Podcast page</h1>;
+}

src/router.tsx

@@ -0,0 +1,23 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { Home } from "./pages/home";
+import { Podcast } from "./pages/podcast";
+import { Episode } from "./pages/episode";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/podcast/:podcastId",
+    element: <Podcast />,
+  },
+  {
+    path: "/podcast/:podcastId/episode/:episodeId",
+    element: <Episode />,
+  },
+]);
+
+export function Router() {
+  return <RouterProvider router={router} />;
+}