From 6800f42b3f8c020b2f84bfe03de0b756fb928f3b Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sat, 20 Apr 2024 23:03:02 +0200
Subject: [PATCH] wip: add layout component and wrap the app

---
 src/components/layout.tsx | 14 ++++++++++++++
 src/router.tsx            | 26 ++++++++++++++++----------
 2 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 src/components/layout.tsx

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
new file mode 100644
index 0000000..a8ebe41
--- /dev/null
+++ b/src/components/layout.tsx
@@ -0,0 +1,14 @@
+import { Outlet } from "react-router-dom";
+
+export function Layout() {
+  return (
+    <div>
+      <header>
+        <h1>Header</h1>
+      </header>
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
diff --git a/src/router.tsx b/src/router.tsx
index 073f5b4..0aa7a31 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -3,23 +3,29 @@ import { Home } from "./pages/home";
 import { Podcast } from "./pages/podcast";
 import { Episode } from "./pages/episode";
 import { PodcastEpisodesList } from "./components/podcast-episodes-list";
+import { Layout } from "./components/layout";
 
 const router = createBrowserRouter([
   {
-    path: "/",
-    element: <Home />,
-  },
-  {
-    path: "/podcast",
-    element: <Podcast />,
+    element: <Layout />,
     children: [
       {
-        path: ":podcastId",
-        element: <PodcastEpisodesList />,
+        path: "/",
+        element: <Home />,
       },
       {
-        path: ":podcastId/episode/:episodeId",
-        element: <Episode />,
+        path: "/podcast",
+        element: <Podcast />,
+        children: [
+          {
+            path: ":podcastId",
+            element: <PodcastEpisodesList />,
+          },
+          {
+            path: ":podcastId/episode/:episodeId",
+            element: <Episode />,
+          },
+        ],
       },
     ],
   },