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/ParabolaWidget.tsx
+++ b/src/components/lessons/ParabolaWidget.tsx
@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+
+const ParabolaWidget: React.FC = () => {
+  const [a, setA] = useState(1);
+  const [h, setH] = useState(2);
+  const [k, setK] = useState(1);
+
+  // Viewport
+  const range = 10;
+  const size = 300;
+  const scale = 300 / (range * 2);
+  const center = size / 2;
+
+  const toPx = (v: number, isY = false) => isY ? center - v * scale : center + v * scale;
+
+  // Generate Path
+  const generatePath = () => {
+      const step = 0.5;
+      let d = "";
+      for (let x = -range; x <= range; x += step) {
+          const y = a * Math.pow(x - h, 2) + k;
+          // Clip if way out of bounds to avoid SVG issues
+          if (Math.abs(y) > range * 2) continue;
+          
+          const px = toPx(x);
+          const py = toPx(y, true);
+          d += x === -range ? `M ${px} ${py}` : ` L ${px} ${py}`;
+      }
+      return d;
+  };
+
+  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">
+               <div className="bg-slate-50 p-4 rounded-xl text-center border border-slate-200">
+                   <div className="text-xs font-bold text-slate-400 uppercase mb-1">Vertex Form</div>
+                   <div className="text-xl font-mono font-bold text-slate-800">
+                       y = <span className="text-indigo-600">{a}</span>(x - <span className="text-emerald-600">{h}</span>)² + <span className="text-rose-600">{k}</span>
+                   </div>
+               </div>
+
+               <div className="space-y-4">
+                   <div>
+                       <label className="text-xs font-bold text-indigo-600 uppercase flex justify-between">
+                           Stretch (a) <span>{a}</span>
+                       </label>
+                       <input type="range" min="-3" max="3" step="0.5" value={a} onChange={e => setA(parseFloat(e.target.value))} className="w-full h-2 bg-indigo-100 rounded-lg accent-indigo-600"/>
+                   </div>
+                   <div>
+                       <label className="text-xs font-bold text-emerald-600 uppercase flex justify-between">
+                           H-Shift (h) <span>{h}</span>
+                       </label>
+                       <input type="range" min="-5" max="5" step="0.5" value={h} onChange={e => setH(parseFloat(e.target.value))} className="w-full h-2 bg-emerald-100 rounded-lg accent-emerald-600"/>
+                   </div>
+                   <div>
+                       <label className="text-xs font-bold text-rose-600 uppercase flex justify-between">
+                           V-Shift (k) <span>{k}</span>
+                       </label>
+                       <input type="range" min="-5" max="5" step="0.5" value={k} onChange={e => setK(parseFloat(e.target.value))} className="w-full h-2 bg-rose-100 rounded-lg accent-rose-600"/>
+                   </div>
+               </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="100%" height="100%" viewBox="0 0 300 300">
+                       <defs>
+                           <pattern id="para-grid" width={scale} height={scale} patternUnits="userSpaceOnUse">
+                               <path d={`M ${scale} 0 L 0 0 0 ${scale}`} fill="none" stroke="#f1f5f9" strokeWidth="1"/>
+                           </pattern>
+                       </defs>
+                       <rect width="100%" height="100%" fill="url(#para-grid)" />
+                       
+                       {/* Axes */}
+                       <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" />
+
+                       {/* Parabola */}
+                       <path d={generatePath()} fill="none" stroke="#8b5cf6" strokeWidth="3" />
+
+                       {/* Vertex */}
+                       <circle cx={toPx(h)} cy={toPx(k, true)} r="5" fill="#e11d48" stroke="white" strokeWidth="2" />
+                       <text x={toPx(h)} y={toPx(k, true) - 10} textAnchor="middle" className="text-xs font-bold fill-rose-600 bg-white">V({h}, {k})</text>
+
+                       {/* Axis of Symmetry */}
+                       <line x1={toPx(h)} y1="0" x2={toPx(h)} y2={size} stroke="#10b981" strokeWidth="1" strokeDasharray="4,4" opacity="0.5" />
+                   </svg>
+               </div>
+           </div>
+       </div>
+    </div>
+  );
+};
+
+export default ParabolaWidget;