| 1 | import { cn } from '@/lib/utils' |
| 2 | import { formatCurrency } |
| 3 | |
| 4 | interface FinancialStatProps { |
| 5 | count: number |
| 6 | icon: React |
| 7 | label: string |
| 8 | tone?: string |
| 9 | totals: Record |
| 10 | unit: string |
| 11 | } |
| 12 | |
| 13 | export function FinancialStat({ |
| 14 | icon: Icon, |
| 15 | label, |
| 16 | totals, |
| 17 | count, |
| 18 | unit, |
| 19 | tone, |
| 20 | }: FinancialStatProps) |
| 21 | const sorted = |
| 22 | const [primary, |
| 23 | |
| 24 | return ( |
| 25 | <div> |
| 26 | <div className='flex items-center gap-1.5 text-muted-foreground text-xs |
| 27 | <Icon className=' |
| 28 | {label} |
| 29 | </div> |
| 30 | <div |
| 31 | className={cn( |
| 32 | 'mt-1.5 font-semibold text-xl tabular-nums', |
| 33 | !primary && 'text-muted-foreground |
| 34 | tone |
| 35 | )} |
| 36 | > |
| 37 | {primary ? formatCurrency |
| 38 | </div> |
| 39 | <p className='mt-0.5 text-muted-foreground text-xs |
| 40 | {count > 0 |
| 41 | </p> |
| 42 | {rest.length > |
| 43 | <p className='mt-0.5 truncate text-muted-foreground text-xs |
| 44 | + {rest.map(( |
| 45 | </p> |
| 46 | )} |
| 47 | </div> |
| 48 | ) |
| 49 | } |