Routers and navigation

src/App.tsx

@@ -3,13 +3,21 @@ import Home from './pages/home/Home';
 import NotFound from './pages/NotFound/NotFound';
 import Layout from './components/Layout';
 import Search from './pages/search/Search';
+import Plays from './pages/plays/Plays';
+import Players from './pages/players/Players';
+import Games from './pages/games/Games';
+import Game from './pages/games/id/Game';
 
 function App() {
     return (
         <Layout>
             <Switch>
                 <Route path="/" component={Home} />
                 <Route path="/search" component={Search} />
+                <Route path="/games" component={Games} />
+                <Route path="/games/:id" component={Game} />
+                <Route path="/players" component={Players} />
+                <Route path="/plays" component={Plays} />
                 <Route>
                     <NotFound />
                 </Route>

src/pages/games/Games.tsx

@@ -0,0 +1,3 @@
+export default function Games() {
+    return <div>Games</div>;
+}

src/pages/games/id/Game.tsx

@@ -0,0 +1,7 @@
+import { useParams } from 'wouter';
+
+export default function Game() {
+    const params = useParams<{ id: string }>();
+    const { id } = params;
+    return <div>Game {id}</div>;
+}

src/pages/players/Players.tsx

@@ -0,0 +1,8 @@
+export default function Players() {
+    return (
+        <div className="flex flex-col items-center justify-center h-screen">
+            <h1 className="text-4xl font-bold mb-4">Jugadores</h1>
+            <p className="text-lg">Aquí puedes ver la lista de jugadores.</p>
+        </div>
+    );
+}

src/pages/plays/Plays.tsx

@@ -0,0 +1,8 @@
+export default function Plays() {
+    return (
+        <div className="flex flex-col items-center justify-center h-screen">
+            <h1 className="text-4xl font-bold mb-4">Jugadas</h1>
+            <p className="text-lg">Aquí puedes ver la lista de jugadas.</p>
+        </div>
+    );
+}