schulze/fire
1
0
Fork 0
Code Issues 1 Pull Requests 3 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 24547c3087
commit 5544c2f69f
2 changed files with 22 additions and 30 deletions
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 (
<div className="w-full max-w-3xl">
<Card className="mb-8">
<>
<Card className="mb-4">
<CardHeader>
<CardTitle className="text-2xl">FIRE Calculator</CardTitle>
<CardDescription>
@@ -541,7 +541,7 @@ export default function FireCalculatorForm() {
</Card>
{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 ? (
<Card className="col-span-full">
<CardContent className="pt-6">
@@ -559,11 +559,9 @@ export default function FireCalculatorForm() {
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
<p className="text-3xl font-bold">
{formatNumber(result.fireNumber)}
</p>
</div>
<p className="text-3xl font-bold">
{formatNumber(result.fireNumber)}
</p>
</CardContent>
</Card>
@@ -575,11 +573,9 @@ export default function FireCalculatorForm() {
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
<p className="text-3xl font-bold">
{result.retirementAge ?? "N/A"}
</p>
</div>
<p className="text-3xl font-bold">
{result.retirementAge ?? "N/A"}
</p>
</CardContent>
</Card>
@@ -592,11 +588,9 @@ export default function FireCalculatorForm() {
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
<p className="text-3xl font-bold">
{formatNumber(result.inflationAdjustedAllowance)}
</p>
</div>
<p className="text-3xl font-bold">
{formatNumber(result.inflationAdjustedAllowance)}
</p>
</CardContent>
</Card>
)}
@@ -610,11 +604,9 @@ export default function FireCalculatorForm() {
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
<p className="text-3xl font-bold">
{result.retirementYears}
</p>
</div>
<p className="text-3xl font-bold">
{result.retirementYears}
</p>
</CardContent>
</Card>
)}
@@ -633,7 +625,7 @@ export default function FireCalculatorForm() {
</CardHeader>
<CardContent>
<ChartContainer
className="h-80"
className="aspect-auto h-80 w-full"
config={{
balance: {
label: "Balance",
@@ -661,13 +653,13 @@ export default function FireCalculatorForm() {
<YAxis
tickFormatter={(value: number) => {
if (value >= 1000000) {
return `${(value / 1000000).toFixed(1)}M`;
return `${(value / 1000000).toPrecision(3)}M`;
} else if (value >= 1000) {
return `${(value / 1000).toFixed(0)}K`;
return `${(value / 1000).toPrecision(3)}K`;
}
return value.toString();
}}
width={80}
width={25}
/>
<ChartTooltip
content={({ active, payload }) => {
@@ -742,6 +734,6 @@ export default function FireCalculatorForm() {
</CardContent>
</Card>
)}
</div>
</>
);
}

4
src/app/page.tsx
View File

@@ -10,7 +10,7 @@ import {
export default function HomePage() {
return (
<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">
<Image
src="/investingfire_logo_no-bg.svg"
@@ -31,7 +31,7 @@ export default function HomePage() {
</div>
{/* 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">
<h2 className="mb-4 text-3xl font-bold">
What is FIRE? Understanding Financial Independence and Early