Components
Financial Goal Card A comprehensive card component to display the progress of a financial goal. It includes a progress summary, an image, investment details, and a list of recent transactions. The component is animated using framer-motion for a dynamic user experience.
Loading preview...
// demo.tsx
import { FinancialGoalCard } from "@/components/ui/financial-goal-card";
import { TrendingUp, DollarSign, Repeat, PiggyBank } from "lucide-react"; // Icons for demo
// --- MOCK DATA ---
const sampleGoal = {
goalName: "Buy a house",
targetDate: "June 2029",
currentAmount: 182495,
targetAmount: 250000,
imageUrl: "https://images.unsplash.com/photo-1568605114967-8130f3a36994?q=80&w=2070&auto=format&fit=crop", // A placeholder image
investmentInfo: {
icon: TrendingUp,
name: "Auto-invested in VMFXX",
yield: "Earning 4.23% yield",
},
transactions: [
{ id: '1', icon: DollarSign, type: 'One-time deposit', date: 'Yesterday', amount: 1350 },
{ id: '2', icon: PiggyBank, type: 'Interest payout', date: 'June 18', amount: 148.95 },
{ id: '3', icon: Repeat, type: 'Regular deposit', date: 'June 1', amount: 1000 },
{ id: '4', icon: Repeat, type: 'Regular deposit', date: 'May 2', amount: 1000 },
{ id: '5', icon: PiggyBank, type: 'Interest payout', date: 'April 15', amount: 128.57 },
],
};
// --- DEMO COMPONENT ---
const FinancialGoalCardDemo = () => {
return (
<div className="flex items-center justify-center min-h-screen bg-background p-4">
<FinancialGoalCard
goalName={sampleGoal.goalName}
targetDate={sampleGoal.targetDate}
currentAmount={sampleGoal.currentAmount}
targetAmount={sampleGoal.targetAmount}
imageUrl={sampleGoal.imageUrl}
investmentInfo={sampleGoal.investmentInfo}
transactions={sampleGoal.transactions}
/>
</div>
);
};
export default FinancialGoalCardDemo;