chore(build): refactor codebase for production
This commit is contained in:
shafin-r
@ -1,77 +1,146 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
const PolynomialBehaviorWidget: React.FC = () => {
|
||||
const [degreeType, setDegreeType] = useState<'even' | 'odd'>('odd');
|
||||
const [lcSign, setLcSign] = useState<'pos' | 'neg'>('pos');
|
||||
const [degreeType, setDegreeType] = useState<"even" | "odd">("odd");
|
||||
const [lcSign, setLcSign] = useState<"pos" | "neg">("pos");
|
||||
|
||||
// Visualization
|
||||
const width = 300;
|
||||
const height = 200;
|
||||
|
||||
const getPath = () => {
|
||||
// Create schematic shapes
|
||||
// Odd +: Low Left -> High Right
|
||||
// Odd -: High Left -> Low Right
|
||||
// Even +: High Left -> High Right
|
||||
// Even -: Low Left -> Low Right
|
||||
|
||||
const startY = (degreeType === 'odd' && lcSign === 'pos') || (degreeType === 'even' && lcSign === 'neg') ? 180 : 20;
|
||||
const endY = (lcSign === 'pos') ? 20 : 180;
|
||||
|
||||
// Control points for curvy polynomial look
|
||||
const cp1Y = startY === 20 ? 150 : 50;
|
||||
const cp2Y = endY === 20 ? 150 : 50;
|
||||
// Create schematic shapes
|
||||
// Odd +: Low Left -> High Right
|
||||
// Odd -: High Left -> Low Right
|
||||
// Even +: High Left -> High Right
|
||||
// Even -: Low Left -> Low Right
|
||||
|
||||
return `M 20 ${startY} C 100 ${cp1Y}, 200 ${cp2Y}, 280 ${endY}`;
|
||||
const startY =
|
||||
(degreeType === "odd" && lcSign === "pos") ||
|
||||
(degreeType === "even" && lcSign === "neg")
|
||||
? 180
|
||||
: 20;
|
||||
const endY = lcSign === "pos" ? 20 : 180;
|
||||
|
||||
// Control points for curvy polynomial look
|
||||
const cp1Y = startY === 20 ? 150 : 50;
|
||||
const cp2Y = endY === 20 ? 150 : 50;
|
||||
|
||||
return `M 20 ${startY} C 100 ${cp1Y}, 200 ${cp2Y}, 280 ${endY}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-bold text-slate-400 uppercase">Degree (Highest Power)</p>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => setDegreeType('even')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === 'even' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-600 border-slate-200'}`}>Even (x², x⁴)</button>
|
||||
<button onClick={() => setDegreeType('odd')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === 'odd' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-600 border-slate-200'}`}>Odd (x, x³)</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-bold text-slate-400 uppercase">Leading Coefficient</p>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => setLcSign('pos')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === 'pos' ? 'bg-emerald-600 text-white border-emerald-600' : 'bg-white text-slate-600 border-slate-200'}`}>Positive (+)</button>
|
||||
<button onClick={() => setLcSign('neg')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === 'neg' ? 'bg-rose-600 text-white border-rose-600' : 'bg-white text-slate-600 border-slate-200'}`}>Negative (-)</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-bold text-slate-400 uppercase">
|
||||
Degree (Highest Power)
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setDegreeType("even")}
|
||||
className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === "even" ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-slate-600 border-slate-200"}`}
|
||||
>
|
||||
Even (x², x⁴)
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDegreeType("odd")}
|
||||
className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === "odd" ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-slate-600 border-slate-200"}`}
|
||||
>
|
||||
Odd (x, x³)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-bold text-slate-400 uppercase">
|
||||
Leading Coefficient
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setLcSign("pos")}
|
||||
className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === "pos" ? "bg-emerald-600 text-white border-emerald-600" : "bg-white text-slate-600 border-slate-200"}`}
|
||||
>
|
||||
Positive (+)
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setLcSign("neg")}
|
||||
className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === "neg" ? "bg-rose-600 text-white border-rose-600" : "bg-white text-slate-600 border-slate-200"}`}
|
||||
>
|
||||
Negative (-)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative h-48 bg-slate-50 border border-slate-200 rounded-xl overflow-hidden flex items-center justify-center">
|
||||
<svg width="300" height="200">
|
||||
<line x1="150" y1="20" x2="150" y2="180" stroke="#cbd5e1" strokeWidth="2" />
|
||||
<line x1="20" y1="100" x2="280" y2="100" stroke="#cbd5e1" strokeWidth="2" />
|
||||
|
||||
<path d={getPath()} stroke="#8b5cf6" strokeWidth="4" fill="none" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
|
||||
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
|
||||
</marker>
|
||||
<marker id="arrow-start" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto-start-reverse">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div className="absolute top-2 left-2 text-xs font-bold text-slate-400">End Behavior</div>
|
||||
</div>
|
||||
<div className="relative h-48 bg-slate-50 border border-slate-200 rounded-xl overflow-hidden flex items-center justify-center">
|
||||
<svg width="300" height="200">
|
||||
<line
|
||||
x1="150"
|
||||
y1="20"
|
||||
x2="150"
|
||||
y2="180"
|
||||
stroke="#cbd5e1"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<line
|
||||
x1="20"
|
||||
y1="100"
|
||||
x2="280"
|
||||
y2="100"
|
||||
stroke="#cbd5e1"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
|
||||
<div className="mt-4 p-3 bg-indigo-50 border border-indigo-100 rounded-lg text-sm text-indigo-900 text-center">
|
||||
{degreeType === 'even' && lcSign === 'pos' && "Ends go in the SAME direction (UP)."}
|
||||
{degreeType === 'even' && lcSign === 'neg' && "Ends go in the SAME direction (DOWN)."}
|
||||
{degreeType === 'odd' && lcSign === 'pos' && "Ends go in OPPOSITE directions (Down Left, Up Right)."}
|
||||
{degreeType === 'odd' && lcSign === 'neg' && "Ends go in OPPOSITE directions (Up Left, Down Right)."}
|
||||
<path
|
||||
d={getPath()}
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
markerEnd="url(#arrow)"
|
||||
markerStart="url(#arrow-start)"
|
||||
/>
|
||||
|
||||
<defs>
|
||||
<marker
|
||||
id="arrow"
|
||||
markerWidth="10"
|
||||
markerHeight="10"
|
||||
refX="8"
|
||||
refY="3"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
|
||||
</marker>
|
||||
<marker
|
||||
id="arrow-start"
|
||||
markerWidth="10"
|
||||
markerHeight="10"
|
||||
refX="8"
|
||||
refY="3"
|
||||
orient="auto-start-reverse"
|
||||
>
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div className="absolute top-2 left-2 text-xs font-bold text-slate-400">
|
||||
End Behavior
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-3 bg-indigo-50 border border-indigo-100 rounded-lg text-sm text-indigo-900 text-center">
|
||||
{degreeType === "even" &&
|
||||
lcSign === "pos" &&
|
||||
"Ends go in the SAME direction (UP)."}
|
||||
{degreeType === "even" &&
|
||||
lcSign === "neg" &&
|
||||
"Ends go in the SAME direction (DOWN)."}
|
||||
{degreeType === "odd" &&
|
||||
lcSign === "pos" &&
|
||||
"Ends go in OPPOSITE directions (Down Left, Up Right)."}
|
||||
{degreeType === "odd" &&
|
||||
lcSign === "neg" &&
|
||||
"Ends go in OPPOSITE directions (Up Left, Down Right)."}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PolynomialBehaviorWidget;
|
||||
export default PolynomialBehaviorWidget;
|
||||
|
||||
Reference in New Issue
Block a user