feat: add react-router for todo app and slideshow

package.json

@@ -22,6 +22,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
+    "react-router-dom": "^6.26.1",
     "react-toastify": "^10.0.5"
   },
   "devDependencies": {

src/App.tsx

@@ -1,20 +1,24 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Todos } from "./components/Todos";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools/production";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { TodosApp } from "./pages/TodoApp";
+import { Home } from "./pages/Home";
 import "./App.css";
+import { Slideshow } from "./pages/Slideshow";
 
-const queryClient = new QueryClient();
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/todos",
+    element: <TodosApp />,
+  },
+  {
+    path: "/slideshow",
+    element: <Slideshow />,
+  },
+]);
 
-function App() {
-  return (
-    <div className="container mx-auto">
-      <h1 className="text-3xl font-bold text-center mt-8 mb-8">My Todos</h1>
-      <QueryClientProvider client={queryClient}>
-        <ReactQueryDevtools initialIsOpen={false} />
-        <Todos />
-      </QueryClientProvider>
-    </div>
-  );
-}
+const App = () => <RouterProvider router={router} />;
 
 export default App;

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

src/pages/Home.tsx

@@ -0,0 +1,17 @@
+import { NavLink } from "react-router-dom";
+
+export const Home = () => (
+  <div className="container mx-auto items-center text-center">
+    <h1 className="text-3xl font-bold text-center mt-8 mb-8">
+      Stories Of Todo
+    </h1>
+    <div className="flex flex-col gap-4">
+      <NavLink className="btn btn-outline btn-lg btn-accent" to="todos">
+        Todos
+      </NavLink>
+      <NavLink className="btn btn-outline btn-lg btn-info" to="slideshow">
+        Slideshow
+      </NavLink>
+    </div>
+  </div>
+);

src/pages/Slideshow.tsx

@@ -0,0 +1 @@
+export const Slideshow = () => <div>WIP</div>;

src/pages/TodoApp.tsx

@@ -0,0 +1,14 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { Todos } from "../components/Todos";
+
+const queryClient = new QueryClient();
+export const TodosApp = () => (
+  <div className="container mx-auto">
+    <h1 className="text-3xl font-bold text-center mt-8 mb-8">My Todos</h1>
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={false} />
+      <Todos />
+    </QueryClientProvider>
+  </div>
+);