feat(lessons): add lessons from client db

2026-03-01 20:24:14 +06:00
parent 2eaf77e13c
commit 2a00c44157
152 changed files with 74587 additions and 222 deletions
--- a/src/components/lessons/SimilarityWidget.tsx
+++ b/src/components/lessons/SimilarityWidget.tsx
@ -0,0 +1,119 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+const SimilarityWidget: React.FC = () => {
+  const [ratio, setRatio] = useState(0.5); // Position of D along AB (0 to 1)
+  const isDragging = useRef(false);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  // Triangle Vertices
+  const A = { x: 200, y: 50 };
+  const B = { x: 50, y: 300 };
+  const C = { x: 350, y: 300 };
+
+  // Calculate D and E based on ratio
+  const D = {
+    x: A.x + (B.x - A.x) * ratio,
+    y: A.y + (B.y - A.y) * ratio
+  };
+  
+  const E = {
+    x: A.x + (C.x - A.x) * ratio,
+    y: A.y + (C.y - A.y) * ratio
+  };
+
+  const handleInteraction = (clientY: number) => {
+    if (!svgRef.current) return;
+    const rect = svgRef.current.getBoundingClientRect();
+    const y = clientY - rect.top;
+    
+    // Clamp y between A.y and B.y
+    const clampedY = Math.max(A.y, Math.min(B.y, y));
+    
+    // Calculate new ratio
+    const newRatio = (clampedY - A.y) / (B.y - A.y);
+    setRatio(Math.max(0.1, Math.min(0.9, newRatio))); // clamp to avoid degenerate
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    isDragging.current = true;
+    handleInteraction(e.clientY);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging.current) {
+      handleInteraction(e.clientY);
+    }
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200 flex flex-col md:flex-row items-center gap-8">
+      <svg 
+        ref={svgRef}
+        width="400" 
+        height="350" 
+        className="select-none cursor-ns-resize"
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={() => isDragging.current = false}
+        onMouseLeave={() => isDragging.current = false}
+      >
+        {/* Main Triangle */}
+        <path d={`M ${A.x} ${A.y} L ${B.x} ${B.y} L ${C.x} ${C.y} Z`} fill="none" stroke="#e2e8f0" strokeWidth="2" />
+        
+        {/* Filled Top Triangle (Similar) */}
+        <path d={`M ${A.x} ${A.y} L ${D.x} ${D.y} L ${E.x} ${E.y} Z`} fill="rgba(244, 63, 94, 0.1)" stroke="none" />
+
+        {/* Parallel Line DE */}
+        <line x1={D.x} y1={D.y} x2={E.x} y2={E.y} stroke="#e11d48" strokeWidth="3" />
+        
+        {/* Labels */}
+        <text x={A.x} y={A.y - 10} textAnchor="middle" fontWeight="bold" fill="#64748b">A</text>
+        <text x={B.x - 10} y={B.y} textAnchor="end" fontWeight="bold" fill="#64748b">B</text>
+        <text x={C.x + 10} y={C.y} textAnchor="start" fontWeight="bold" fill="#64748b">C</text>
+        <text x={D.x - 10} y={D.y} textAnchor="end" fontWeight="bold" fill="#e11d48">D</text>
+        <text x={E.x + 10} y={E.y} textAnchor="start" fontWeight="bold" fill="#e11d48">E</text>
+
+        {/* Drag Handle */}
+        <circle cx={D.x} cy={D.y} r="6" fill="#e11d48" stroke="white" strokeWidth="2" />
+        <circle cx={E.x} cy={E.y} r="6" fill="#e11d48" stroke="white" strokeWidth="2" />
+
+      </svg>
+
+      <div className="flex-1 w-full">
+         <h3 className="text-lg font-bold text-slate-800 mb-4">Triangle Proportionality</h3>
+         <p className="text-sm text-slate-500 mb-6">Drag the red line. Because DE || BC, the small triangle is similar to the large triangle.</p>
+         
+         <div className="space-y-4">
+            <div className="bg-slate-50 p-4 rounded-lg border-l-4 border-rose-500">
+               <p className="text-xs font-bold text-slate-400 uppercase mb-1">Scale Factor</p>
+               <p className="font-mono text-xl text-rose-700">{ratio.toFixed(2)}</p>
+            </div>
+
+            <div className="bg-white border border-slate-200 p-4 rounded-lg shadow-sm">
+               <p className="font-mono text-sm mb-2 text-slate-600">Corresponding Sides Ratio:</p>
+               <div className="flex items-center justify-between font-mono font-bold text-lg">
+                  <div className="text-rose-600">AD / AB</div>
+                  <div className="text-slate-400">=</div>
+                  <div className="text-rose-600">AE / AC</div>
+                  <div className="text-slate-400">=</div>
+                  <div className="text-rose-600">{ratio.toFixed(2)}</div>
+               </div>
+            </div>
+            
+            <div className="bg-white border border-slate-200 p-4 rounded-lg shadow-sm">
+               <p className="font-mono text-sm mb-2 text-slate-600">Area Ratio (k²):</p>
+               <div className="flex items-center justify-between font-mono font-bold text-lg">
+                  <div className="text-rose-600">Area(ADE)</div>
+                  <div className="text-slate-400">/</div>
+                  <div className="text-slate-600">Area(ABC)</div>
+                  <div className="text-slate-400">=</div>
+                  <div className="text-rose-600">{(ratio * ratio).toFixed(2)}</div>
+               </div>
+            </div>
+         </div>
+      </div>
+    </div>
+  );
+};
+
+export default SimilarityWidget;