Function StatCard

studio/src/pages/Overview.tsx:188–232

({ title, value, icon: Icon, color, trend }: StatCardProps)

}

function StatCard({ title, value, icon: Icon, color, trend }: StatCardProps) {
  const colorMap = {
    primary: 'var(--color-primary)',
    accent: 'var(--color-accent)',
    success: 'var(--color-success)',
    warning: 'var(--color-warning)',
    error: 'var(--color-error)',
  };

  return (
    <div className="card">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm text-[var(--color-text-muted)]">{title}</p>
          <p className="text-2xl font-bold text-[var(--color-text-primary)] mt-1">
            {value}
          </p>
        </div>
        <div
          className="p-2 rounded-lg"
          style={{ backgroundColor: `${colorMap[color]}20` }}
        >
          <Icon className="w-5 h-5" style={{ color: colorMap[color] }} />
        </div>
      </div>
      {trend !== undefined && (
        <div className="flex items-center gap-1 mt-2">
          <TrendingUp
            className={`w-4 h-4 ${
              trend >= 0 ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'
            }`}
          />
          <span
            className={`text-sm ${
              trend >= 0 ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'
            }`}
          >
            {trend >= 0 ? '+' : ''}
            {formatPercent(trend)}
          </span>
        </div>
      )}
    </div>
  );
}