schulze/fire
schulze/fire
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Releases Activity

styling, graph sizing and number precision

Browse Source
This commit is contained in:
Felix Schulze 2025-04-30 20:05:38 +02:00
parent 0f6cd57f3d
commit 886afab1ef
2 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/components/FireCalculatorForm.tsx
View File

@ -368,8 +368,8 @@ export default function FireCalculatorForm() {
}; };
return ( return (
<div className="w-full max-w-3xl"> <>
<Card className="mb-8"> <Card className="mb-4">
<CardHeader> <CardHeader>
<CardTitle className="text-2xl">FIRE Calculator</CardTitle> <CardTitle className="text-2xl">FIRE Calculator</CardTitle>
<CardDescription> <CardDescription>
@ -541,7 +541,7 @@ export default function FireCalculatorForm() {
</Card> </Card>
{result && ( {result && (
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2"> <div className="mb-4 grid grid-cols-1 gap-2 md:grid-cols-2">
{result.error ? ( {result.error ? (
<Card className="col-span-full"> <Card className="col-span-full">
<CardContent className="pt-6"> <CardContent className="pt-6">
@ -559,11 +559,9 @@ export default function FireCalculatorForm() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <p className="text-3xl font-bold">
<p className="text-3xl font-bold"> {formatNumber(result.fireNumber)}
{formatNumber(result.fireNumber)} </p>
</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
@ -575,11 +573,9 @@ export default function FireCalculatorForm() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <p className="text-3xl font-bold">
<p className="text-3xl font-bold"> {result.retirementAge ?? "N/A"}
{result.retirementAge ?? "N/A"} </p>
</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
@ -592,11 +588,9 @@ export default function FireCalculatorForm() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <p className="text-3xl font-bold">
<p className="text-3xl font-bold"> {formatNumber(result.inflationAdjustedAllowance)}
{formatNumber(result.inflationAdjustedAllowance)} </p>
</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
)} )}
@ -610,11 +604,9 @@ export default function FireCalculatorForm() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <p className="text-3xl font-bold">
<p className="text-3xl font-bold"> {result.retirementYears}
{result.retirementYears} </p>
</p>
</div>
</CardContent> </CardContent>
</Card> </Card>
)} )}
@ -633,7 +625,7 @@ export default function FireCalculatorForm() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ChartContainer <ChartContainer
className="h-80" className="aspect-auto h-80 w-full"
config={{ config={{
balance: { balance: {
label: "Balance", label: "Balance",
@ -661,13 +653,13 @@ export default function FireCalculatorForm() {
<YAxis <YAxis
tickFormatter={(value: number) => { tickFormatter={(value: number) => {
if (value >= 1000000) { if (value >= 1000000) {
return `${(value / 1000000).toFixed(1)}M`; return `${(value / 1000000).toPrecision(3)}M`;
} else if (value >= 1000) { } else if (value >= 1000) {
return `${(value / 1000).toFixed(0)}K`; return `${(value / 1000).toPrecision(3)}K`;
} }
return value.toString(); return value.toString();
}} }}
width={80} width={25}
/> />
<ChartTooltip <ChartTooltip
content={({ active, payload }) => { content={({ active, payload }) => {
@ -742,6 +734,6 @@ export default function FireCalculatorForm() {
</CardContent> </CardContent>
</Card> </Card>
)} )}
</div> </>
); );
} }

4
src/app/page.tsx
View File

@ -10,7 +10,7 @@ import {
export default function HomePage() { export default function HomePage() {
return ( return (
<main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-4"> <main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-4">
<div className="container mx-auto flex flex-col items-center justify-center gap-4 px-4 py-16 text-center"> <div className="mx-auto flex flex-col items-center justify-center gap-4 text-center">
<div className="flex flex-row flex-wrap items-center justify-center gap-4 align-middle"> <div className="flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
<Image <Image
src="/investingfire_logo_no-bg.svg" src="/investingfire_logo_no-bg.svg"
@ -31,7 +31,7 @@ export default function HomePage() {
</div> </div>
{/* Added SEO Content Sections */} {/* Added SEO Content Sections */}
<div className="container mx-auto max-w-4xl px-4 py-8 text-left"> <div className="mx-auto max-w-2xl py-12 text-left">
<section className="mb-12"> <section className="mb-12">
<h2 className="mb-4 text-3xl font-bold"> <h2 className="mb-4 text-3xl font-bold">
What is FIRE? Understanding Financial Independence and Early What is FIRE? Understanding Financial Independence and Early