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)
26 lines
606 B
TypeScript
26 lines
606 B
TypeScript
'use client'
|
|
|
|
import { Info, AlertTriangle, AlertCircle, LucideIcon } from 'lucide-react'
|
|
import { Alert } from '@/lib/types'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface AlertIconProps {
|
|
type: Alert['type']
|
|
className?: string
|
|
}
|
|
|
|
const iconMap: Record<Alert['type'], LucideIcon> = {
|
|
PAYMENT_DUE: AlertCircle,
|
|
BUDGET_WARNING: AlertTriangle,
|
|
CARD_CLOSING: Info,
|
|
CARD_DUE: AlertCircle,
|
|
SAVINGS_GOAL: Info,
|
|
UNUSUAL_SPENDING: AlertTriangle,
|
|
}
|
|
|
|
export function AlertIcon({ type, className }: AlertIconProps) {
|
|
const Icon = iconMap[type]
|
|
|
|
return <Icon className={cn('h-5 w-5', className)} />
|
|
}
|