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)
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { CreditCard } from '@/lib/types'
|
|
import { Check } from 'lucide-react'
|
|
|
|
interface MiniCardProps {
|
|
card: CreditCard
|
|
selected?: boolean
|
|
onClick?: () => void
|
|
}
|
|
|
|
export function MiniCard({ card, selected = false, onClick }: MiniCardProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`flex w-full items-center gap-3 rounded-lg border p-3 text-left transition-all ${
|
|
selected
|
|
? 'border-indigo-500 bg-indigo-500/20 ring-2 ring-indigo-500/30'
|
|
: 'border-slate-600 bg-slate-800 hover:border-slate-500 hover:bg-slate-700'
|
|
}`}
|
|
>
|
|
{/* Color indicator */}
|
|
<div
|
|
className="h-10 w-10 shrink-0 rounded-lg shadow-inner"
|
|
style={{ backgroundColor: card.color }}
|
|
/>
|
|
|
|
{/* Card info */}
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate font-medium text-white">{card.name}</p>
|
|
<p className="text-sm text-slate-400">**** {card.lastFourDigits}</p>
|
|
</div>
|
|
|
|
{/* Selected indicator */}
|
|
{selected && (
|
|
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-indigo-500">
|
|
<Check className="h-4 w-4 text-white" />
|
|
</div>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|