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)
33 lines
669 B
TypeScript
33 lines
669 B
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface AlertBadgeProps {
|
|
count: number
|
|
variant?: 'default' | 'dot'
|
|
}
|
|
|
|
export function AlertBadge({ count, variant = 'default' }: AlertBadgeProps) {
|
|
if (count === 0) {
|
|
return null
|
|
}
|
|
|
|
if (variant === 'dot') {
|
|
return (
|
|
<span className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-red-500 animate-pulse" />
|
|
)
|
|
}
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center justify-center min-w-[20px] h-5 px-1.5',
|
|
'rounded-full bg-red-500 text-white text-xs font-medium',
|
|
'animate-pulse'
|
|
)}
|
|
>
|
|
{count > 99 ? '99+' : count}
|
|
</span>
|
|
)
|
|
}
|