| 1 | import Link from 'next/link' |
| 2 | import { Card } |
| 3 | import { cn } |
| 4 | import type { RouteImpl |
| 5 | |
| 6 | export type StatAccent |
| 7 | |
| 8 | const accentStyles: Record |
| 9 | sky: 'bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300', |
| 10 | violet: |
| 11 | 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300', |
| 12 | amber: 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300', |
| 13 | teal: 'bg-teal-100 text-teal-700 dark:bg-teal-500/15 dark:text-teal-300', |
| 14 | rose: 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300', |
| 15 | slate: 'bg-slate-100 text-slate-700 dark:bg-slate-500/15 dark:text-slate-300', |
| 16 | } |
| 17 | |
| 18 | interface StatCardProps { |
| 19 | accent?: StatAccent |
| 20 | href?: string |
| 21 | icon: React |
| 22 | label: string |
| 23 | sublabel?: string |
| 24 | value: string |
| 25 | } |
| 26 | |
| 27 | export function StatCard({ |
| 28 | icon: Icon, |
| 29 | label, |
| 30 | value, |
| 31 | sublabel, |
| 32 | href, |
| 33 | accent = 'slate' |
| 34 | }: StatCardProps) |
| 35 | const content = |
| 36 | <Card |
| 37 | className={cn( |
| 38 | 'group/stat gap-0 p-4', |
| 39 | href && |
| 40 | 'transition-all hover:-translate-y-0.5 hover:border-primary/50 hover:shadow-sm' |
| 41 | )} |
| 42 | > |
| 43 | <div className='flex items-center gap-2 |
| 44 | <span |
| 45 | className={cn( |
| 46 | 'flex size-7 items-center justify-center rounded-md', |
| 47 | accentStyles[accent] |
| 48 | )} |
| 49 | > |
| 50 | <Icon className=' |
| 51 | </span> |
| 52 | <span className='text-muted-foreground text-sm |
| 53 | </div> |
| 54 | <div className='mt-3 font-semibold text-2xl tracking-tight |
| 55 | <p className='mt-1 text-muted-foreground text-xs |
| 56 | {sublabel ?? '\u00A0 |
| 57 | </p> |
| 58 | </Card> |
| 59 | ) |
| 60 | |
| 61 | if (href) { |
| 62 | return <Link href |
| 63 | } |
| 64 | |
| 65 | return content |
| 66 | } |