https://sistur.lovable.app/assets/StatCard-DFAoFzx7.js

1const e=`import { tx } from '@/i18n/t';
2import { cn } from '@/lib/utils';
3import { LucideIcon } from 'lucide-react';
4
5interface StatCardProps {
6  title: string;
7  value: string | number;
8  icon: LucideIcon;
9  trend?: {
10    value: number;
11    isPositive: boolean;
12  };
13  variant?: 'default' | 'primary' | 'warning' | 'success';
14  className?: string;
15}
16
17export function StatCard({ title, value, icon: Icon, trend, variant = 'default', className }: StatCardProps) {
18  const variants = {
19    default: 'bg-card border-border',
20    primary: 'bg-primary/5 border-primary/20',
21    warning: 'bg-severity-moderate/5 border-severity-moderate/20',
22    success: 'bg-severity-good/5 border-severity-good/20',
23  };
24
25  const iconVariants = {
26    default: 'bg-muted text-muted-foreground',
27    primary: 'bg-primary/10 text-primary',
28    warning: 'bg-severity-moderate/10 text-severity-moderate',
29    success: 'bg-severity-good/10 text-severity-good',
30  };
31
32  return (
33    <div
34      className={cn(
35        'p-6 rounded-2xl border transition-all duration-300 ease-out hover:shadow-lg hover:-translate-y-1 animate-fade-in group',
36        variants[variant],
37        className
38      )}
39    >
40      <div className="flex items-start justify-between">
41        <div className="space-y-2">
42          <p className="text-sm font-medium text-muted-foreground tracking-wide">{title}</p>
43          <p className="text-3xl sm:text-4xl font-display font-bold text-foreground tracking-tight">
44            {value}
45          </p>
46          {trend && (
47            <p
48              className={cn(
49                'text-sm font-semibold flex items-center gap-1',
50                trend.isPositive ? 'text-severity-good' : 'text-severity-critical'
51              )}
52            >
53              {trend.isPositive ? '↑' : '↓'} {Math.abs(trend.value)}%
54              <span className="text-muted-foreground font-normal ml-1">{tx('vs. anterior')}</span>
55            </p>
56          )}
57        </div>
58        <div className={cn('p-3 rounded-2xl transition-transform duration-300 group-hover:scale-110', iconVariants[variant])}>
59          <Icon className="h-6 w-6" />
60        </div>
61      </div>
62    </div>
63  );
64}
65`;export{e as default};