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)
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { LucideIcon, TrendingUp, TrendingDown } from 'lucide-react'
|
|
import { formatCurrency } from '@/lib/utils'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface MetricCardProps {
|
|
title: string
|
|
amount: number
|
|
subtitle?: string
|
|
trend?: {
|
|
value: number
|
|
isPositive: boolean
|
|
}
|
|
icon: LucideIcon
|
|
color?: string
|
|
}
|
|
|
|
export function MetricCard({
|
|
title,
|
|
amount,
|
|
subtitle,
|
|
trend,
|
|
icon: Icon,
|
|
color = 'text-emerald-400',
|
|
}: MetricCardProps) {
|
|
return (
|
|
<div className="relative overflow-hidden rounded-xl border border-slate-700 bg-slate-800 p-6 shadow-lg">
|
|
{/* Icono en esquina superior derecha */}
|
|
<div className={cn('absolute right-4 top-4', color)}>
|
|
<Icon className="h-10 w-10 opacity-80" />
|
|
</div>
|
|
|
|
{/* Contenido */}
|
|
<div className="relative">
|
|
{/* Título */}
|
|
<h3 className="text-sm font-medium text-slate-400">{title}</h3>
|
|
|
|
{/* Monto */}
|
|
<p className="mt-2 font-mono text-3xl font-bold text-emerald-400">
|
|
{formatCurrency(amount)}
|
|
</p>
|
|
|
|
{/* Subtítulo */}
|
|
{subtitle && (
|
|
<p className="mt-1 text-sm text-slate-500">{subtitle}</p>
|
|
)}
|
|
|
|
{/* Indicador de tendencia */}
|
|
{trend && (
|
|
<div className="mt-3 flex items-center gap-1.5">
|
|
{trend.isPositive ? (
|
|
<>
|
|
<TrendingUp className="h-4 w-4 text-emerald-500" />
|
|
<span className="text-sm font-medium text-emerald-500">
|
|
+{trend.value}%
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<TrendingDown className="h-4 w-4 text-rose-500" />
|
|
<span className="text-sm font-medium text-rose-500">
|
|
-{trend.value}%
|
|
</span>
|
|
</>
|
|
)}
|
|
<span className="text-sm text-slate-500">vs mes anterior</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|