← back to Omega Watches 2

src/components/ui/StatCard.tsx

43 lines

'use client';

import { cn } from '@/lib/utils';

interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  change?: number;
  icon?: React.ReactNode;
  variant?: 'default' | 'success' | 'warning' | 'danger';
}

const variantStyles = {
  default: 'border-navy-700',
  success: 'border-green-500/30',
  warning: 'border-yellow-500/30',
  danger: 'border-red-500/30',
};

export default function StatCard({ title, value, subtitle, change, icon, variant = 'default' }: StatCardProps) {
  return (
    <div className={cn(
      'bg-navy-800/50 rounded-xl border p-4 hover:bg-navy-800 transition-colors',
      variantStyles[variant]
    )}>
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs uppercase tracking-wider text-navy-400">{title}</span>
        {icon && <span className="text-navy-400">{icon}</span>}
      </div>
      <div className="text-2xl font-bold text-white">{value}</div>
      <div className="flex items-center gap-2 mt-1">
        {subtitle && <span className="text-xs text-navy-400">{subtitle}</span>}
        {change !== undefined && (
          <span className={cn('text-xs font-medium', change >= 0 ? 'text-green-400' : 'text-red-400')}>
            {change >= 0 ? '+' : ''}{change.toFixed(1)}%
          </span>
        )}
      </div>
    </div>
  );
}