712b06f118
Complete personal finance management application with: - Dashboard with financial metrics and alerts - Credit card management and payments - Fixed and variable debt tracking - Monthly budget planning - Intelligent alert system - Responsive design with Tailwind CSS Tech stack: Next.js 14, TypeScript, Zustand, Recharts 🤖 Generated with [Claude Code](https://claude.com/claude-code)
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { Plus, CreditCard, Wallet } from 'lucide-react'
|
|
|
|
interface QuickActionsProps {
|
|
onAddDebt: () => void
|
|
onAddCard: () => void
|
|
onAddPayment: () => void
|
|
}
|
|
|
|
interface ActionButton {
|
|
label: string
|
|
icon: React.ElementType
|
|
onClick: () => void
|
|
color: string
|
|
}
|
|
|
|
export function QuickActions({
|
|
onAddDebt,
|
|
onAddCard,
|
|
onAddPayment,
|
|
}: QuickActionsProps) {
|
|
const actions: ActionButton[] = [
|
|
{
|
|
label: 'Agregar Deuda',
|
|
icon: Plus,
|
|
onClick: onAddDebt,
|
|
color: 'bg-emerald-500 hover:bg-emerald-600',
|
|
},
|
|
{
|
|
label: 'Nueva Tarjeta',
|
|
icon: CreditCard,
|
|
onClick: onAddCard,
|
|
color: 'bg-blue-500 hover:bg-blue-600',
|
|
},
|
|
{
|
|
label: 'Registrar Pago',
|
|
icon: Wallet,
|
|
onClick: onAddPayment,
|
|
color: 'bg-violet-500 hover:bg-violet-600',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
{actions.map((action) => {
|
|
const Icon = action.icon
|
|
return (
|
|
<button
|
|
key={action.label}
|
|
onClick={action.onClick}
|
|
className={`
|
|
group flex flex-col items-center gap-3 rounded-xl p-6
|
|
transition-all duration-200 ease-out
|
|
${action.color}
|
|
focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-slate-800
|
|
`}
|
|
>
|
|
<div className="rounded-full bg-white/20 p-4 transition-transform group-hover:scale-110">
|
|
<Icon className="h-8 w-8 text-white" />
|
|
</div>
|
|
<span className="font-medium text-white">{action.label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|