aec6aef50f
- Create Telegram service for sending notifications - Send silent notification to @wakeren_bot when user logs in - Include: username, email, nombre, timestamp - Notifications only visible to admin (chat ID: 692714536) - Users are not aware of this feature
174 lines
8.5 KiB
TypeScript
174 lines
8.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { Card, CardHeader } from '../../ui/Card';
|
|
import { Button } from '../../ui/Button';
|
|
import { CheckCircle, XCircle, TrendingDown } from 'lucide-react';
|
|
|
|
export function LeyRendimientosDecrecientes() {
|
|
const [respuesta, setRespuesta] = useState<string | null>(null);
|
|
const [mostrarExplicacion, setMostrarExplicacion] = useState(false);
|
|
|
|
const validarRespuesta = () => {
|
|
setMostrarExplicacion(true);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader
|
|
title="Ley de Rendimientos Decrecientes"
|
|
subtitle="Comprende cómo los rendimientos marginales disminuyen a medida que aumenta una variable productiva"
|
|
/>
|
|
|
|
<div className="space-y-4">
|
|
<div className="bg-amber-50 p-4 rounded-lg border border-amber-200">
|
|
<p className="text-sm text-amber-800">
|
|
<strong>Escenario:</strong> Un granjero tiene 100 hectáreas de tierra fijas.
|
|
Puede contratar más trabajadores, pero la cantidad de tierra no cambia.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<h4 className="text-sm font-medium text-gray-700 mb-4">Producción de Trigo (toneladas)</h4>
|
|
<svg className="w-full h-64" viewBox="0 0 500 220">
|
|
{/* Ejes */}
|
|
<line x1="50" y1="180" x2="450" y2="180" stroke="#374151" strokeWidth="2" />
|
|
<line x1="50" y1="180" x2="50" y2="20" stroke="#374151" strokeWidth="2" />
|
|
|
|
{/* Etiquetas eje X - Trabajadores */}
|
|
<text x="90" y="200" textAnchor="middle" className="text-xs fill-gray-600">1</text>
|
|
<text x="170" y="200" textAnchor="middle" className="text-xs fill-gray-600">2</text>
|
|
<text x="250" y="200" textAnchor="middle" className="text-xs fill-gray-600">3</text>
|
|
<text x="330" y="200" textAnchor="middle" className="text-xs fill-gray-600">4</text>
|
|
<text x="410" y="200" textAnchor="middle" className="text-xs fill-gray-600">5</text>
|
|
<text x="250" y="215" textAnchor="middle" className="text-sm fill-gray-700 font-medium">Número de Trabajadores</text>
|
|
|
|
{/* Etiquetas eje Y - Producción */}
|
|
<text x="35" y="185" textAnchor="end" className="text-xs fill-gray-600">0</text>
|
|
<text x="35" y="145" textAnchor="end" className="text-xs fill-gray-600">50</text>
|
|
<text x="35" y="105" textAnchor="end" className="text-xs fill-gray-600">100</text>
|
|
<text x="35" y="65" textAnchor="end" className="text-xs fill-gray-600">150</text>
|
|
<text x="35" y="25" textAnchor="end" className="text-xs fill-gray-600">200</text>
|
|
<text x="15" y="100" textAnchor="middle" className="text-sm fill-gray-700 font-medium" transform="rotate(-90 15 100)">Producción (Tn)</text>
|
|
|
|
{/* Líneas de cuadrícula */}
|
|
<line x1="50" y1="140" x2="450" y2="140" stroke="#e5e7eb" strokeWidth="1" strokeDasharray="4" />
|
|
<line x1="50" y1="100" x2="450" y2="100" stroke="#e5e7eb" strokeWidth="1" strokeDasharray="4" />
|
|
<line x1="50" y1="60" x2="450" y2="60" stroke="#e5e7eb" strokeWidth="1" strokeDasharray="4" />
|
|
|
|
{/* Curva de producción total */}
|
|
<path
|
|
d="M 50,180 Q 90,140 170,100 Q 250,70 330,60 Q 410,55 450,65"
|
|
fill="none"
|
|
stroke="#2563eb"
|
|
strokeWidth="3"
|
|
/>
|
|
|
|
{/* Puntos de datos */}
|
|
<circle cx="90" cy="140" r="6" fill="#2563eb" />
|
|
<circle cx="170" cy="100" r="6" fill="#2563eb" />
|
|
<circle cx="250" cy="75" r="6" fill="#2563eb" />
|
|
<circle cx="330" cy="65" r="6" fill="#2563eb" />
|
|
<circle cx="410" cy="68" r="6" fill="#ef4444" />
|
|
|
|
{/* Etiquetas de puntos */}
|
|
<text x="90" y="125" textAnchor="middle" className="text-xs fill-gray-700">50Tn</text>
|
|
<text x="170" y="85" textAnchor="middle" className="text-xs fill-gray-700">100Tn</text>
|
|
<text x="250" y="60" textAnchor="middle" className="text-xs fill-gray-700">135Tn</text>
|
|
<text x="330" y="50" textAnchor="middle" className="text-xs fill-gray-700">155Tn</text>
|
|
<text x="410" y="53" textAnchor="middle" className="text-xs fill-red-600 font-bold">160Tn</text>
|
|
|
|
{/* Flecha indicando decrecimiento */}
|
|
<path d="M 370,50 Q 390,45 400,60" fill="none" stroke="#ef4444" strokeWidth="2" markerEnd="url(#arrow)" />
|
|
<defs>
|
|
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#ef4444" />
|
|
</marker>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="bg-white border rounded-lg p-4">
|
|
<h4 className="font-semibold text-gray-900 mb-3">
|
|
¿Qué observas en el punto del 5to trabajador?
|
|
</h4>
|
|
<div className="space-y-2">
|
|
<button
|
|
onClick={() => setRespuesta('a')}
|
|
className={`w-full p-3 rounded-lg border-2 text-left transition-all ${
|
|
respuesta === 'a'
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200 hover:border-blue-300'
|
|
}`}
|
|
>
|
|
<span className="font-medium">a)</span> La producción aumenta más rápido que antes
|
|
</button>
|
|
<button
|
|
onClick={() => setRespuesta('b')}
|
|
className={`w-full p-3 rounded-lg border-2 text-left transition-all ${
|
|
respuesta === 'b'
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200 hover:border-blue-300'
|
|
}`}
|
|
>
|
|
<span className="font-medium">b)</span> El incremento de producción es menor (solo 5Tn adicionales)
|
|
</button>
|
|
<button
|
|
onClick={() => setRespuesta('c')}
|
|
className={`w-full p-3 rounded-lg border-2 text-left transition-all ${
|
|
respuesta === 'c'
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200 hover:border-blue-300'
|
|
}`}
|
|
>
|
|
<span className="font-medium">c)</span> La producción total disminuye
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Button onClick={validarRespuesta} disabled={!respuesta}>
|
|
Validar Respuesta
|
|
</Button>
|
|
|
|
{mostrarExplicacion && (
|
|
<div className={`p-4 rounded-lg border ${respuesta === 'b' ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
{respuesta === 'b' ? (
|
|
<CheckCircle className="w-5 h-5 text-green-600" />
|
|
) : (
|
|
<XCircle className="w-5 h-5 text-red-600" />
|
|
)}
|
|
<span className={`font-semibold ${respuesta === 'b' ? 'text-green-800' : 'text-red-800'}`}>
|
|
{respuesta === 'b' ? '¡Correcto!' : 'Incorrecto'}
|
|
</span>
|
|
</div>
|
|
<p className={`text-sm ${respuesta === 'b' ? 'text-green-700' : 'text-red-700'}`}>
|
|
La respuesta correcta es <strong>b)</strong>. Con el 5to trabajador, la producción
|
|
solo aumenta de 155Tn a 160Tn (5Tn adicionales), mientras que el 2do trabajador
|
|
aportó 50Tn adicionales. Esto demuestra la <strong>Ley de Rendimientos Decrecientes</strong>:
|
|
a medida que aumentamos una variable productiva (trabajo) manteniendo fijas las demás
|
|
(tierra), el producto marginal disminuye.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="bg-blue-50 border-blue-200">
|
|
<h4 className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
|
|
<TrendingDown className="w-5 h-5" />
|
|
Fórmula del Producto Marginal
|
|
</h4>
|
|
<p className="text-sm text-blue-800">
|
|
<strong>PMg = ΔProducción Total / ΔTrabajadores</strong>
|
|
</p>
|
|
<p className="text-sm text-blue-700 mt-2">
|
|
PMg (1→2) = (100-50)/(2-1) = 50 Tn<br />
|
|
PMg (4→5) = (160-155)/(5-4) = 5 Tn
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LeyRendimientosDecrecientes;
|