71 lines
3.2 KiB
TypeScript
71 lines
3.2 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { ArrowRight } from 'lucide-react';
|
||
|
||
const UnitConversionWidget: React.FC = () => {
|
||
const [speed, setSpeed] = useState(60); // miles per hour
|
||
|
||
// Steps
|
||
const ftPerMile = 5280;
|
||
const secPerHour = 3600;
|
||
|
||
const ftPerHour = speed * ftPerMile;
|
||
const ftPerSec = ftPerHour / secPerHour;
|
||
|
||
return (
|
||
<div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
|
||
<div className="mb-8">
|
||
<label className="text-sm font-bold text-slate-500 uppercase">Speed (mph)</label>
|
||
<div className="flex items-center gap-4 mt-2">
|
||
<input
|
||
type="range" min="10" max="100" step="5" value={speed}
|
||
onChange={e => setSpeed(Number(e.target.value))}
|
||
className="flex-1 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-amber-600"
|
||
/>
|
||
<span className="font-mono font-bold text-2xl text-slate-800 w-20 text-right">{speed}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{/* Step 1: Write initial */}
|
||
<div className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg border border-slate-200 overflow-x-auto">
|
||
<div className="flex flex-col items-center">
|
||
<span className="font-bold text-lg text-slate-800">{speed} miles</span>
|
||
<div className="w-full h-0.5 bg-slate-800 my-1"></div>
|
||
<span className="font-bold text-lg text-slate-800">1 hour</span>
|
||
</div>
|
||
|
||
<span className="text-slate-400 font-bold">×</span>
|
||
|
||
<div className="flex flex-col items-center">
|
||
<span className="font-bold text-lg text-emerald-600">5280 feet</span>
|
||
<div className="w-full h-0.5 bg-emerald-600 my-1"></div>
|
||
<span className="font-bold text-lg text-rose-600 line-through decoration-2">1 mile</span>
|
||
</div>
|
||
|
||
<span className="text-slate-400 font-bold">×</span>
|
||
|
||
<div className="flex flex-col items-center">
|
||
<span className="font-bold text-lg text-slate-800 line-through decoration-2 decoration-rose-600">1 hour</span>
|
||
<div className="w-full h-0.5 bg-slate-800 my-1"></div>
|
||
<span className="font-bold text-lg text-emerald-600">3600 sec</span>
|
||
</div>
|
||
|
||
<ArrowRight className="w-6 h-6 text-slate-400 shrink-0" />
|
||
|
||
<div className="flex flex-col items-center bg-white px-4 py-2 rounded shadow-sm border border-emerald-200">
|
||
<span className="font-bold text-xl text-emerald-700">{ftPerSec.toFixed(1)} ft</span>
|
||
<div className="w-full h-0.5 bg-emerald-700 my-1"></div>
|
||
<span className="font-bold text-xl text-emerald-700">1 sec</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-sm text-slate-500">
|
||
<p><strong className="text-rose-600">Red units</strong> cancel out (top and bottom).</p>
|
||
<p><strong className="text-emerald-600">Green units</strong> remain.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UnitConversionWidget; |