chore(build): refactor codebase for production
This commit is contained in:
shafin-r
@ -1,14 +1,13 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import React, { useState } from "react";
|
||||
|
||||
const MultiStepPercentWidget: React.FC = () => {
|
||||
const [start, setStart] = useState(100);
|
||||
const start = 100;
|
||||
const [change1, setChange1] = useState(40); // +40%
|
||||
const [change2, setChange2] = useState(-25); // -25%
|
||||
|
||||
const step1Val = start * (1 + change1/100);
|
||||
const finalVal = step1Val * (1 + change2/100);
|
||||
|
||||
const step1Val = start * (1 + change1 / 100);
|
||||
const finalVal = step1Val * (1 + change2 / 100);
|
||||
|
||||
const overallChange = ((finalVal - start) / start) * 100;
|
||||
const naiveChange = change1 + change2;
|
||||
|
||||
@ -18,86 +17,134 @@ const MultiStepPercentWidget: React.FC = () => {
|
||||
|
||||
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 mb-8">
|
||||
<div className="w-full md:w-1/3 space-y-6">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-slate-400 uppercase">Change 1 (Markup)</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="range" min="-50" max="100" step="5"
|
||||
value={change1} onChange={e => setChange1(parseInt(e.target.value))}
|
||||
className="flex-1 accent-indigo-600"
|
||||
/>
|
||||
<span className="font-bold text-indigo-600 w-12 text-right">{change1 > 0 ? '+' : ''}{change1}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-bold text-slate-400 uppercase">Change 2 (Discount)</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="range" min="-50" max="50" step="5"
|
||||
value={change2} onChange={e => setChange2(parseInt(e.target.value))}
|
||||
className="flex-1 accent-rose-600"
|
||||
/>
|
||||
<span className="font-bold text-rose-600 w-12 text-right">{change2 > 0 ? '+' : ''}{change2}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row gap-8 mb-8">
|
||||
<div className="w-full md:w-1/3 space-y-6">
|
||||
<div>
|
||||
<label className="text-xs font-bold text-slate-400 uppercase">
|
||||
Change 1 (Markup)
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="range"
|
||||
min="-50"
|
||||
max="100"
|
||||
step="5"
|
||||
value={change1}
|
||||
onChange={(e) => setChange1(parseInt(e.target.value))}
|
||||
className="flex-1 accent-indigo-600"
|
||||
/>
|
||||
<span className="font-bold text-indigo-600 w-12 text-right">
|
||||
{change1 > 0 ? "+" : ""}
|
||||
{change1}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-bold text-slate-400 uppercase">
|
||||
Change 2 (Discount)
|
||||
</label>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="range"
|
||||
min="-50"
|
||||
max="50"
|
||||
step="5"
|
||||
value={change2}
|
||||
onChange={(e) => setChange2(parseInt(e.target.value))}
|
||||
className="flex-1 accent-rose-600"
|
||||
/>
|
||||
<span className="font-bold text-rose-600 w-12 text-right">
|
||||
{change2 > 0 ? "+" : ""}
|
||||
{change2}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-4">
|
||||
{/* Step 0 */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between text-xs font-bold text-slate-400 mb-1">
|
||||
<span>Start</span>
|
||||
<span>${start}</span>
|
||||
</div>
|
||||
<div className="h-8 bg-slate-200 rounded-md" style={{ width: `${getWidth(start)}%` }}></div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-4">
|
||||
{/* Step 0 */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between text-xs font-bold text-slate-400 mb-1">
|
||||
<span>Start</span>
|
||||
<span>${start}</span>
|
||||
</div>
|
||||
<div
|
||||
className="h-8 bg-slate-200 rounded-md"
|
||||
style={{ width: `${getWidth(start)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* Step 1 */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between text-xs font-bold text-indigo-500 mb-1">
|
||||
<span>After {change1 > 0 ? '+' : ''}{change1}%</span>
|
||||
<span>${step1Val.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="h-8 bg-indigo-100 rounded-md transition-all duration-500" style={{ width: `${getWidth(step1Val)}%` }}>
|
||||
<div className="h-full bg-indigo-500 rounded-l-md" style={{ width: `${(start/step1Val)*100}%` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Step 1 */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between text-xs font-bold text-indigo-500 mb-1">
|
||||
<span>
|
||||
After {change1 > 0 ? "+" : ""}
|
||||
{change1}%
|
||||
</span>
|
||||
<span>${step1Val.toFixed(2)}</span>
|
||||
</div>
|
||||
<div
|
||||
className="h-8 bg-indigo-100 rounded-md transition-all duration-500"
|
||||
style={{ width: `${getWidth(step1Val)}%` }}
|
||||
>
|
||||
<div
|
||||
className="h-full bg-indigo-500 rounded-l-md"
|
||||
style={{ width: `${(start / step1Val) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between text-xs font-bold text-rose-500 mb-1">
|
||||
<span>After {change2 > 0 ? '+' : ''}{change2}%</span>
|
||||
<span>${finalVal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="h-8 bg-rose-100 rounded-md transition-all duration-500" style={{ width: `${getWidth(finalVal)}%` }}>
|
||||
<div className="h-full bg-rose-500 rounded-l-md" style={{ width: `${(step1Val/finalVal)*100}%` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Step 2 */}
|
||||
<div className="relative">
|
||||
<div className="flex justify-between text-xs font-bold text-rose-500 mb-1">
|
||||
<span>
|
||||
After {change2 > 0 ? "+" : ""}
|
||||
{change2}%
|
||||
</span>
|
||||
<span>${finalVal.toFixed(2)}</span>
|
||||
</div>
|
||||
<div
|
||||
className="h-8 bg-rose-100 rounded-md transition-all duration-500"
|
||||
style={{ width: `${getWidth(finalVal)}%` }}
|
||||
>
|
||||
<div
|
||||
className="h-full bg-rose-500 rounded-l-md"
|
||||
style={{ width: `${(step1Val / finalVal) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 p-4 rounded-xl border border-slate-200 grid grid-cols-2 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-xs font-bold text-slate-400 uppercase mb-1">The Trap (Additive)</div>
|
||||
<div className="text-lg font-bold text-slate-400 line-through decoration-red-500 decoration-2">
|
||||
{naiveChange > 0 ? '+' : ''}{naiveChange}%
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-400">({change1} + {change2})</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-bold text-emerald-600 uppercase mb-1">Actual Change</div>
|
||||
<div className="text-2xl font-bold text-emerald-600">
|
||||
{overallChange > 0 ? '+' : ''}{overallChange.toFixed(2)}%
|
||||
</div>
|
||||
<div className="text-[10px] text-emerald-600 font-mono">
|
||||
1.{change1} × {1 + change2/100} = {(1 + change1/100) * (1 + change2/100)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 p-4 rounded-xl border border-slate-200 grid grid-cols-2 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-xs font-bold text-slate-400 uppercase mb-1">
|
||||
The Trap (Additive)
|
||||
</div>
|
||||
<div className="text-lg font-bold text-slate-400 line-through decoration-red-500 decoration-2">
|
||||
{naiveChange > 0 ? "+" : ""}
|
||||
{naiveChange}%
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-400">
|
||||
({change1} + {change2})
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-bold text-emerald-600 uppercase mb-1">
|
||||
Actual Change
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-emerald-600">
|
||||
{overallChange > 0 ? "+" : ""}
|
||||
{overallChange.toFixed(2)}%
|
||||
</div>
|
||||
<div className="text-[10px] text-emerald-600 font-mono">
|
||||
1.{change1} × {1 + change2 / 100} ={" "}
|
||||
{(1 + change1 / 100) * (1 + change2 / 100)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MultiStepPercentWidget;
|
||||
export default MultiStepPercentWidget;
|
||||
|
||||
Reference in New Issue
Block a user