wip: add layout component and wrap the app

This commit is contained in:
2024-04-20 23:03:02 +02:00
parent 04ec9f21cf
commit 6800f42b3f
2 changed files with 30 additions and 10 deletions

14
src/components/layout.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Outlet } from "react-router-dom";
export function Layout() {
return (
<div>
<header>
<h1>Header</h1>
</header>
<main>
<Outlet />
</main>
</div>
);
}

View File

@@ -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 />,
},
],
},
],
},