22 lines
876 B
TypeScript
22 lines
876 B
TypeScript
import { Card } from "@/components/ui/Card";
|
|
import { ProgressBar } from "@/components/ui/ProgressBar";
|
|
|
|
export function GoalCard({ name, saved, target, date }: { name: string; saved: number; target: number; date: string }) {
|
|
const pct = Math.round((saved / target) * 100);
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h3 className="font-bold text-ink dark:text-paper">{name}</h3>
|
|
<p className="text-sm text-ink/55 dark:text-paper/55">Projected {date}</p>
|
|
</div>
|
|
<p className="font-display text-2xl text-forest dark:text-mint">{pct}%</p>
|
|
</div>
|
|
<div className="mt-5">
|
|
<ProgressBar value={pct} />
|
|
</div>
|
|
<p className="mt-3 text-sm text-ink/60 dark:text-paper/60">${saved.toLocaleString()} of ${target.toLocaleString()}</p>
|
|
</Card>
|
|
);
|
|
}
|