import { motion } from "motion/react"; import { useState } from "react"; import NumberFlow from "@number-flow/react"; import { Slider } from "./Slider"; export default function App() { const [monthlyInvestment, setMonthlyInvestment] = useState<number>(9490); const [expectedReturn, setExpectedReturn] = useState<number>(9); const [timePeriod, setTimePeriod] = useState<number>(7); const investedAmount = monthlyInvestment * 12 * timePeriod; const monthlyRate = expectedReturn / 100 / 12; const totalMonths = timePeriod * 12; const finalAmount = monthlyRate > 0 ? monthlyInvestment * ((Math.pow(1 + monthlyRate, totalMonths) - 1) / monthlyRate) * (1 + monthlyRate) : investedAmount; const totalReturns = finalAmount - investedAmount; return ( <main className="relative w-full min-h-screen flex items-start md:items-center justify-center px-4 py-10 bg-zinc-100"> <div className="w-full max-w-md"> <div className="w-full space-y-4 rounded-[32px] shadow pt-5 pb-8 px-8 bg-white overflow-hidden"> <div className="w-full flex items-start justify-start gap-5"> <div className="shrink-0 -ml-4"> <CircularView investedAmount={investedAmount} totalReturns={totalReturns} /> </div> <div className="flex flex-col items-start gap-4 pt-8"> <div className="flex items-start gap-2"> <div className="size-5 rounded-full bg-[#D4D4D9] mt-1"></div> <div className="flex flex-col items-start gap-0.5 shrink-0"> <span className="text-sm text-gray-500">Invested Amount</span> <NumberFlow className="text-lg font-semibold w-40 overflow-hidden" value={investedAmount} locales="en-US" format={{ style: "currency", currency: "USD", }} /> </div> </div> <div className="flex items-start gap-2"> <div className="size-5 rounded-full bg-[#3F3F46] mt-1"></div> <div className="flex flex-col items-start gap-0.5 shrink-0"> <span className="text-sm text-gray-500">Total Returns</span> <NumberFlow className="text-lg font-semibold w-40 overflow-hidden" value={totalReturns} locales="en-US" format={{ style: "currency", currency: "USD", }} /> </div> </div> </div> </div> <div className="w-full space-y-6"> <div className="bg-zinc-50 border rounded-br-3xl rounded-bl-3xl rounded-[28px] p-1"> <div className="bg-white border rounded-full py-5 px-4"> <Slider value={[monthlyInvestment]} onValueChange={(values) => setMonthlyInvestment(values[0])} max={50000} min={1000} step={1000} /> </div> <div className="w-full flex items-center justify-between gap-2 px-3 pb-2 pt-3"> <label className="block text-md">Monthly Investment</label> <NumberFlow className="text-sm text-gray-700 h-[18px]" value={monthlyInvestment} locales="en-US" format={{ style: "currency", currency: "USD", }} /> </div> </div> <div className="bg-zinc-50 border rounded-br-3xl rounded-bl-3xl rounded-[28px] p-1"> <div className="bg-white border rounded-full py-5 px-4"> <Slider value={[expectedReturn]} onValueChange={(values) => setExpectedReturn(values[0])} max={30} min={1} step={1} /> </div> <div className="w-full flex items-center justify-between gap-2 px-3 pb-2 pt-3"> <label className="block text-md"> Expected Returns</label> <NumberFlow className="text-sm text-gray-700 h-[18px]" value={expectedReturn} suffix=" %" /> </div> </div> <div className="bg-zinc-50 border rounded-br-3xl rounded-bl-3xl rounded-[28px] p-1"> <div className="bg-white border rounded-full py-5 px-4"> <Slider value={[timePeriod]} onValueChange={(values) => setTimePeriod(values[0])} max={60} min={1} step={1} /> </div> <div className="w-full flex items-center justify-between gap-2 px-3 pb-2 pt-3"> <label className="block text-md">Time Period</label> <NumberFlow className="text-sm text-gray-700 h-[18px]" value={timePeriod} suffix=" years" /> </div> </div> </div> </div> </div> </main> ); } interface CircularViewProps { investedAmount: number; totalReturns: number; size?: number; gapAngle?: number; investedColor?: string; returnsColor?: string; strokeWidthInvested?: number; strokeWidthReturns?: number; } const CircularView: React.FC<CircularViewProps> = ({ investedAmount, totalReturns, size = 180, gapAngle = 22, investedColor = "#D4D4D9", returnsColor = "#3F3F46", strokeWidthInvested = 14, strokeWidthReturns = 24, }) => { const arcs = [ { label: "Returns", value: totalReturns, color: returnsColor, strokeWidth: strokeWidthReturns, }, { label: "Invested", value: investedAmount, color: investedColor, strokeWidth: strokeWidthInvested, }, ]; const total = arcs.reduce((acc, arc) => acc + arc.value, 0); const totalGapAngle = gapAngle * arcs.length; const availableAngle = 360 - totalGapAngle; const cumulativeAngles: number[] = []; let cumulative = 0; arcs.forEach((arc) => { const proportion = total > 0 ? arc.value / total : 0; const angle = proportion * availableAngle; cumulativeAngles.push(cumulative); cumulative += angle + gapAngle; }); const maxStrokeWidth = Math.max(strokeWidthInvested, strokeWidthReturns); const cx = size / 2; const cy = size / 2; const radius = size / 2 - maxStrokeWidth; return ( <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}> {/* Optionally, add a background circle */} <circle cx={cx} cy={cy} r={radius} fill="none" stroke="none" strokeWidth="10" /> {arcs.map((arc, index) => { const startAngle = cumulativeAngles[index]; const proportion = total > 0 ? arc.value / total : 0; const angle = proportion * availableAngle; const startRad = (Math.PI / 180) * (startAngle - 90); const endRad = (Math.PI / 180) * (startAngle + angle - 90); const x1 = cx + radius * Math.cos(startRad); const y1 = cy + radius * Math.sin(startRad); const x2 = cx + radius * Math.cos(endRad); const y2 = cy + radius * Math.sin(endRad); const largeArcFlag = angle > 180 ? 1 : 0; const pathData = ` M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} `; return ( <motion.g key={arc.label}> <motion.path d={pathData} fill="none" stroke={arc.color} strokeWidth={arc.strokeWidth} strokeLinecap="round" initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} transition={{ duration: 0.3 }} /> </motion.g> ); })} </svg> ); };

Returns Calculator Snippet

Code

Stacks

Inspiration

X ( Twitter ) Post