| 1 | import { Coffee, Monitor, Plane, BookOpen, MoreHorizontal } from "lucide-react"; |
| 2 | |
| 3 | const categories = [ |
| 4 | { name: "Software & Tools", amount: 890, icon: Monitor, color: "bg-blue-500" }, |
| 5 | { name: "Travel", amount: 650, icon: Plane, color: "bg-purple-500" }, |
| 6 | { name: "Food & Meals", amount: 420, icon: Coffee, color: "bg-orange-500" }, |
| 7 | { name: "Learning & Dev", amount: 320, icon: BookOpen, color: "bg-primary" }, |
| 8 | { name: "Other", amount: 170, icon: MoreHorizontal, color: "bg-muted-foreground" }, |
| 9 | ]; |
| 10 | |
| 11 | const totalSpent = categories.reduce((sum, cat) => sum + cat.amount, 0); |
| 12 | |
| 13 | const SpendingBreakdown = () => { |
| 14 | return ( |
| 15 | <section className="py-12 bg-background"> |
| 16 | <div className="container"> |
| 17 | <div className="max-w-4xl mx-auto"> |
| 18 | <h2 className="text-xl md:text-2xl font-bold text-foreground mb-6 animate-fade-up"> |
| 19 | Where your money goes |
| 20 | </h2> |
| 21 | |
| 22 | <div className="grid gap-3 animate-fade-up animation-delay-100"> |
| 23 | {categories.map((category, index) => { |
| 24 | const percentage = (category.amount / totalSpent) * 100; |
| 25 | const Icon = category.icon; |
| 26 | |
| 27 | return ( |
| 28 | <div |
| 29 | key={category.name} |
| 30 | className="bg-card rounded-xl border border-border p-4 hover:border-primary/30 transition-colors cursor-pointer" |
| 31 | style={{ animationDelay: `${index * 50}ms` }} |
| 32 | > |
| 33 | <div className="flex items-center gap-4"> |
| 34 | <div className={`w-10 h-10 ${category.color} rounded-lg flex items-center justify-center`}> |
| 35 | <Icon className="w-5 h-5 text-white" /> |
| 36 | </div> |
| 37 | <div className="flex-1 min-w-0"> |
| 38 | <div className="flex items-center justify-between mb-2"> |
| 39 | <span className="font-medium text-foreground">{category.name}</span> |
| 40 | <span className="font-semibold text-foreground">${category.amount}</span> |
| 41 | </div> |
| 42 | <div className="h-2 bg-muted rounded-full overflow-hidden"> |
| 43 | <div |
| 44 | className={`h-full ${category.color} rounded-full transition-all duration-500`} |
| 45 | style={{ width: `${percentage}%` }} |
| 46 | /> |
| 47 | </div> |
| 48 | </div> |
| 49 | </div> |
| 50 | </div> |
| 51 | ); |
| 52 | })} |
| 53 | </div> |
| 54 | </div> |
| 55 | </div> |
| 56 | </section> |
| 57 | ); |
| 58 | }; |
| 59 | |
| 60 | export default SpendingBreakdown; |