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/SystemVisualizerWidget.tsx
+++ b/src/components/lessons/SystemVisualizerWidget.tsx
@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+
+const SystemVisualizerWidget: React.FC = () => {
+  // Line 1: y = m1x + b1
+  const [m1, setM1] = useState(1);
+  const [b1, setB1] = useState(2);
+  
+  // Line 2: y = m2x + b2
+  const [m2, setM2] = useState(-1);
+  const [b2, setB2] = useState(6);
+
+  // Visualization params
+  const range = 10;
+  const scale = 20;
+  const size = 300;
+  const center = size / 2;
+
+  const toPx = (v: number, isY = false) => {
+    return isY ? center - v * scale : center + v * scale;
+  };
+
+  // Logic
+  let intersectX = 0;
+  let intersectY = 0;
+  let solutionType = 'one'; // 'one', 'none', 'inf'
+
+  if (m1 === m2) {
+      if (b1 === b2) solutionType = 'inf';
+      else solutionType = 'none';
+  } else {
+      intersectX = (b2 - b1) / (m1 - m2);
+      intersectY = m1 * intersectX + b1;
+  }
+
+  const getLinePath = (m: number, b: number) => {
+      const x1 = -range;
+      const y1 = m * x1 + b;
+      const x2 = range;
+      const y2 = m * x2 + b;
+      return `M ${toPx(x1)} ${toPx(y1, true)} L ${toPx(x2)} ${toPx(y2, true)}`;
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
+      <div className="flex flex-col md:flex-row gap-8">
+         <div className="w-full md:w-1/3 space-y-6">
+             {/* Line 1 */}
+             <div className="p-4 bg-indigo-50 border border-indigo-100 rounded-lg">
+                 <div className="flex justify-between items-center mb-2">
+                     <span className="font-bold text-indigo-800 text-sm">Line 1: y = {m1}x + {b1}</span>
+                 </div>
+                 <div className="space-y-2">
+                     <input type="range" min="-4" max="4" step="0.5" value={m1} onChange={e => setM1(parseFloat(e.target.value))} className="w-full h-1 bg-indigo-200 rounded accent-indigo-600"/>
+                     <input type="range" min="-8" max="8" step="1" value={b1} onChange={e => setB1(parseFloat(e.target.value))} className="w-full h-1 bg-indigo-200 rounded accent-indigo-600"/>
+                 </div>
+             </div>
+
+             {/* Line 2 */}
+             <div className="p-4 bg-rose-50 border border-rose-100 rounded-lg">
+                 <div className="flex justify-between items-center mb-2">
+                     <span className="font-bold text-rose-800 text-sm">Line 2: y = {m2}x + {b2}</span>
+                 </div>
+                 <div className="space-y-2">
+                     <input type="range" min="-4" max="4" step="0.5" value={m2} onChange={e => setM2(parseFloat(e.target.value))} className="w-full h-1 bg-rose-200 rounded accent-rose-600"/>
+                     <input type="range" min="-8" max="8" step="1" value={b2} onChange={e => setB2(parseFloat(e.target.value))} className="w-full h-1 bg-rose-200 rounded accent-rose-600"/>
+                 </div>
+             </div>
+
+             {/* Result */}
+             <div className={`p-4 rounded-lg text-center font-bold border-2 ${
+                 solutionType === 'one' ? 'bg-emerald-50 border-emerald-200 text-emerald-800' :
+                 solutionType === 'none' ? 'bg-slate-50 border-slate-200 text-slate-500' :
+                 'bg-amber-50 border-amber-200 text-amber-800'
+             }`}>
+                 {solutionType === 'one' && `Intersection: (${intersectX.toFixed(1)}, ${intersectY.toFixed(1)})`}
+                 {solutionType === 'none' && "No Solution (Parallel Lines)"}
+                 {solutionType === 'inf' && "Infinite Solutions (Same Line)"}
+             </div>
+         </div>
+
+         <div className="flex-1 flex justify-center">
+             <div className="relative w-[300px] h-[300px] bg-white border border-slate-200 rounded-xl overflow-hidden">
+                 <svg width="300" height="300" viewBox="0 0 300 300">
+                     <defs>
+                        <pattern id="grid-sys" width="20" height="20" patternUnits="userSpaceOnUse">
+                            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" strokeWidth="1"/>
+                        </pattern>
+                     </defs>
+                     <rect width="100%" height="100%" fill="url(#grid-sys)" />
+                     
+                     <line x1="0" y1={center} x2={size} y2={center} stroke="#cbd5e1" strokeWidth="2" />
+                     <line x1={center} y1="0" x2={center} y2={size} stroke="#cbd5e1" strokeWidth="2" />
+
+                     <path d={getLinePath(m1, b1)} stroke="#4f46e5" strokeWidth="3" />
+                     <path d={getLinePath(m2, b2)} stroke="#e11d48" strokeWidth="3" strokeDasharray={solutionType === 'inf' ? "5,5" : ""} />
+
+                     {solutionType === 'one' && (
+                         <circle cx={toPx(intersectX)} cy={toPx(intersectY, true)} r="5" fill="#10b981" stroke="white" strokeWidth="2" />
+                     )}
+                 </svg>
+             </div>
+         </div>
+      </div>
+    </div>
+  );
+};
+
+export default SystemVisualizerWidget;