71 lines
3.8 KiB
TypeScript
71 lines
3.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
const RadicalWidget: React.FC = () => {
|
|
const [power, setPower] = useState(3);
|
|
const [root, setRoot] = useState(2);
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-8">
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="text-xs font-bold text-violet-600 uppercase mb-1 block">Power (Numerator) m</label>
|
|
<div className="flex items-center gap-4">
|
|
<input
|
|
type="range" min="1" max="9" value={power} onChange={e => setPower(parseInt(e.target.value))}
|
|
className="flex-1 h-2 bg-violet-100 rounded-lg accent-violet-600"
|
|
/>
|
|
<span className="font-mono font-bold text-violet-800 text-xl">{power}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs font-bold text-fuchsia-600 uppercase mb-1 block">Root (Denominator) n</label>
|
|
<div className="flex items-center gap-4">
|
|
<input
|
|
type="range" min="2" max="9" value={root} onChange={e => setRoot(parseInt(e.target.value))}
|
|
className="flex-1 h-2 bg-fuchsia-100 rounded-lg accent-fuchsia-600"
|
|
/>
|
|
<span className="font-mono font-bold text-fuchsia-800 text-xl">{root}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center justify-center p-6 bg-slate-50 rounded-xl border border-slate-200 min-h-[160px]">
|
|
<div className="flex items-center gap-8 text-4xl font-serif">
|
|
{/* Rational Exponent Form */}
|
|
<div className="text-center group">
|
|
<span className="font-bold text-slate-700 italic">x</span>
|
|
<sup className="text-2xl font-sans font-bold">
|
|
<span className="text-violet-600 group-hover:scale-110 inline-block transition-transform">{power}</span>
|
|
<span className="text-slate-400 mx-1">/</span>
|
|
<span className="text-fuchsia-600 group-hover:scale-110 inline-block transition-transform">{root}</span>
|
|
</sup>
|
|
</div>
|
|
|
|
<span className="text-slate-300">=</span>
|
|
|
|
{/* Radical Form */}
|
|
<div className="text-center relative group">
|
|
<span className="absolute -top-3 -left-3 text-lg font-bold text-fuchsia-600 font-sans group-hover:scale-110 transition-transform">{root}</span>
|
|
<span className="text-slate-400">√</span>
|
|
<span className="border-t-2 border-slate-400 px-1 font-bold text-slate-700 italic">
|
|
x
|
|
<sup className="text-violet-600 text-2xl font-sans ml-0.5 group-hover:scale-110 inline-block transition-transform">{power}</sup>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-slate-600 bg-indigo-50 p-4 rounded-lg border border-indigo-100">
|
|
<p className="mb-2"><strong>The Golden Rule:</strong> The top number stays with x (power), the bottom number becomes the root.</p>
|
|
<p className="font-mono">
|
|
Exponent <span className="text-violet-600 font-bold">{power}</span> goes inside.
|
|
Root <span className="text-fuchsia-600 font-bold">{root}</span> goes outside.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RadicalWidget; |