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
@@ -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 />
  );
 }

@@ -1,43 +1,43 @@
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

 export default function ValueFunctionChart({ result }) {
-  if (!result) return null;
+    if (!result) return null;

  return (
    <div className="w-full max-w-4xl mt-12 p-8 bg-white rounded-2xl shadow-xl border border-slate-100">
-      <h3 className="text-2xl font-bold text-slate-800 mb-8 text-center">
-        Función de Valor: {result.criterion_name}
-      </h3>
+        <h3 className="text-2xl font-bold text-slate-800 mb-8 text-center">
+            Función de Valor: {result.criterion_name}
+        </h3>
      
-      <div className="w-full mt-4">
-        <ResponsiveContainer width="100%" height={400}>
-          <LineChart
-            data={Object.entries(result.values).map(([label, value]) => ({
-              nombre: label,
-              valor: value
-            }))}
-            margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
-          >
-            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-            <XAxis dataKey="nombre" tick={{ fill: '#475569', fontWeight: 600 }} dy={10} />
-            <YAxis domain={[0, 1]} tick={{ fill: '#475569' }} dx={-10} />
-            <Tooltip
-              contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
-              formatter={(value) => [value.toFixed(4), 'Valor DoC']}
-              labelStyle={{ fontWeight: 'bold', color: '#1e293b', marginBottom: '4px' }}
-            />
-            <Line
-              type="monotone"
-              dataKey="valor"
-              stroke="#2563eb"
-              strokeWidth={4}
-              activeDot={{ r: 8, strokeWidth: 0 }}
-              dot={{ r: 6, fill: '#2563eb', stroke: '#ffffff', strokeWidth: 2 }}
-              animationDuration={1500}
-            />
-          </LineChart>
-        </ResponsiveContainer>
-      </div>
+        <div className="w-full mt-4">
+            <ResponsiveContainer width="100%" height={400}>
+            <LineChart
+                data={Object.entries(result.values).map(([label, value]) => ({
+                nombre: label,
+                valor: value
+                }))}
+                margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
+            >
+                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                <XAxis dataKey="nombre" tick={{ fill: '#475569', fontWeight: 600 }} dy={10} />
+                <YAxis domain={[0, 1]} tick={{ fill: '#475569' }} dx={-10} />
+                <Tooltip
+                    contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
+                    formatter={(value) => [value.toFixed(4), 'Valor DoC']}
+                    labelStyle={{ fontWeight: 'bold', color: '#1e293b', marginBottom: '4px' }}
+                />
+                <Line
+                    type="monotone"
+                    dataKey="valor"
+                    stroke="#2563eb"
+                    strokeWidth={4}
+                    activeDot={{ r: 8, strokeWidth: 0 }}
+                    dot={{ r: 6, fill: '#2563eb', stroke: '#ffffff', strokeWidth: 2 }}
+                    animationDuration={1500}
+                />
+            </LineChart>
+            </ResponsiveContainer>
+        </div>
    </div>
  );
 }
@@ -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>
+  );
+};