add: añadir enrutado para separar la sección "basico" y "avanzado"

2026-03-24 13:19:37 +01:00
parent 91b3c4a1cb
commit 9a3c40e30e
7 changed files with 171 additions and 37 deletions
@@ -12,6 +12,7 @@
        "axios": "^1.13.6",
        "react": "^19.2.4",
        "react-dom": "^19.2.4",
+        "react-router-dom": "^7.13.2",
        "recharts": "^3.8.0",
        "tailwindcss": "^4.2.2"
      },
@@ -1529,6 +1530,19 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3093,6 +3107,44 @@
        }
      }
    },
+    "node_modules/react-router": {
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.2.tgz",
+      "integrity": "sha512-tX1Aee+ArlKQP+NIUd7SE6Li+CiGKwQtbS+FfRxPX6Pe4vHOo6nr9d++u5cwg+Z8K/x8tP+7qLmujDtfrAoUJA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.2.tgz",
+      "integrity": "sha512-aR7SUORwTqAW0JDeiWF07e9SBE9qGpByR9I8kJT5h/FrBKxPMS6TiC7rmVO+gC0q52Bx7JnjWe8Z1sR9faN4YA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
    "node_modules/recharts": {
      "version": "3.8.0",
      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.0.tgz",
@@ -3209,6 +3261,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -14,6 +14,7 @@
    "axios": "^1.13.6",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.2",
    "recharts": "^3.8.0",
    "tailwindcss": "^4.2.2"
  },
@@ -1,10 +1,8 @@
-import BasicMode from './pages/BasicMode';
+import { AppRouter } from './routers/AppRouter';

 function App() {
  return (
-    <div className="min-h-screen bg-slate-50 p-8 font-sans text-slate-800 flex flex-col items-center">
-      <BasicMode/>
-    </div>
+    <AppRouter />
  );
 }

@@ -0,0 +1,49 @@
+import { Outlet, NavLink } from 'react-router-dom';
+
+export const MainLayout = () => {
+  return (
+    <div className="min-h-screen bg-slate-50 p-8 font-sans text-slate-800 flex flex-col items-center">
+      
+        <header className="text-center mb-8 flex flex-col items-center gap-6">
+            <h1 className="text-4xl font-extrabold text-slate-900 tracking-tight">
+            Método <span className="text-blue-600">Deck of Cards</span>
+            </h1>
+        </header>
+
+        <div className="flex justify-center mb-10 w-full">
+            <div className="bg-slate-200/60 p-1.5 rounded-2xl flex gap-2 shadow-inner">
+            <NavLink
+                to="/basico"
+                className={({ isActive }) =>
+                `px-8 py-3 rounded-xl font-bold transition-all duration-300 ${
+                    isActive
+                    ? 'bg-white text-blue-600 shadow-md transform scale-105' 
+                    : 'text-slate-500 hover:text-slate-700 hover:bg-slate-300/50'
+                }`
+                }
+            >
+                DoC Clásico
+            </NavLink>
+            
+            <NavLink
+                to="/avanzado"
+                className={({ isActive }) =>
+                `px-8 py-3 rounded-xl font-bold transition-all duration-300 ${
+                    isActive
+                    ? 'bg-white text-blue-600 shadow-md transform scale-105' 
+                    : 'text-slate-500 hover:text-slate-700 hover:bg-slate-300/50'
+                }`
+                }
+            >
+                DoC-MF Avanzado
+            </NavLink>
+            </div>
+        </div>
+
+        <main className="w-full flex flex-col items-center">
+            <Outlet />
+        </main>
+
+    </div>
+  );
+};
@@ -0,0 +1,7 @@
+export default function AdvancedMode() {
+  return (
+    <h1>
+        En construcción
+    </h1>
+  );
+}
@@ -0,0 +1,21 @@
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import BasicMode from '../pages/BasicMode';
+import AdvancedMode from '../pages/AdvancedMode';
+import { MainLayout } from '../components/layout/MainLayout';
+
+export const AppRouter = () => {
+  return (
+    <Router>
+        <Routes>
+
+            <Route element={<MainLayout />}>
+                <Route path="/basico" element={<BasicMode />} />
+                <Route path="/avanzado" element={<AdvancedMode />} />
+            </Route>
+
+            <Route path="/*" element={<Navigate to="/basico" />} />
+
+        </Routes>
+    </Router>
+  );
+};