finguard/StatCard.jsx at main · gurramgagandeep-stack/finguard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useState } from 'react'
import { TrendingUp, TrendingDown } from 'lucide-react'

const colorMap = {
  '#4DF0C5': { bg: 'rgba(77,240,197,0.08)',  border: 'rgba(77,240,197,0.18)',  glow: 'rgba(77,240,197,0.18)',  hoverGlow: 'rgba(77,240,197,0.32)' },
  '#FF5757': { bg: 'rgba(255,87,87,0.08)',   border: 'rgba(255,87,87,0.18)',   glow: 'rgba(255,87,87,0.15)',   hoverGlow: 'rgba(255,87,87,0.28)' },
  '#FFAA00': { bg: 'rgba(255,170,0,0.08)',   border: 'rgba(255,170,0,0.18)',   glow: 'rgba(255,170,0,0.15)',   hoverGlow: 'rgba(255,170,0,0.28)' },
  '#60ABFF': { bg: 'rgba(96,171,255,0.08)',  border: 'rgba(96,171,255,0.18)',  glow: 'rgba(96,171,255,0.15)',  hoverGlow: 'rgba(96,171,255,0.28)' },
  '#FFB547': { bg: 'rgba(255,181,71,0.08)',  border: 'rgba(255,181,71,0.18)',  glow: 'rgba(255,181,71,0.15)',  hoverGlow: 'rgba(255,181,71,0.28)' },
  '#FF6B6B': { bg: 'rgba(255,107,107,0.08)', border: 'rgba(255,107,107,0.18)', glow: 'rgba(255,107,107,0.15)', hoverGlow: 'rgba(255,107,107,0.28)' },
}

export default function StatCard({ icon: Icon, label, value, sub, color = '#4DF0C5', trend, delay = 0 }) {
  const [isHovered, setIsHovered] = useState(false)
  const c = colorMap[color] || colorMap['#4DF0C5']
  const trendPositive = trend >= 0

  return (
    <div
      className="animate-fadeInUp"
      style={{
        animationDelay: `${delay}ms`,
        background: 'rgba(14,14,28,0.85)',
        border: `1px solid ${isHovered ? c.border : 'rgba(77,240,197,0.1)'}`,
        borderRadius: '20px',
        padding: '22px 24px',
        backdropFilter: 'blur(28px)',
        boxShadow: isHovered
          ? `0 12px 40px rgba(0,0,0,0.5), 0 0 40px ${c.hoverGlow}, inset 0 1px 0 rgba(255,255,255,0.06)`
          : `0 4px 24px rgba(0,0,0,0.35), 0 0 20px ${c.glow}, inset 0 1px 0 rgba(255,255,255,0.04)`,
        transition: 'all 0.3s cubic-bezier(0.4,0,0.2,1)',
        transform: isHovered ? 'translateY(-3px)' : 'translateY(0)',
        cursor: 'default', position: 'relative', overflow: 'hidden',
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Corner accent */}
      <div style={{
        position: 'absolute', top: 0, right: 0,
        width: '80px', height: '80px',
        background: `radial-gradient(circle at top right, ${c.bg}, transparent 70%)`,
        pointerEvents: 'none',
      }} />

      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '18px' }}>
        <div style={{
          width: '42px', height: '42px', borderRadius: '12px',
          background: c.bg, border: `1px solid ${c.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 4px 12px ${c.glow}`,
          transition: 'all 0.3s',
          transform: isHovered ? 'scale(1.05)' : 'scale(1)',
        }}>
          <Icon size={18} color={color} />
        </div>
        {trend !== undefined && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: '4px',
            fontSize: '11px', fontWeight: 700,
            color: trendPositive ? '#4DF0C5' : '#FF5757',
            background: trendPositive ? 'rgba(77,240,197,0.1)' : 'rgba(255,87,87,0.1)',
            border: `1px solid ${trendPositive ? 'rgba(77,240,197,0.2)' : 'rgba(255,87,87,0.2)'}`,
            padding: '3px 8px', borderRadius: '6px',
          }}>
            {trendPositive ? <TrendingUp size={11} /> : <TrendingDown size={11} />}
            {Math.abs(trend)}%
          </div>
        )}
      </div>

      <div style={{
        fontFamily: 'Syne, sans-serif', fontSize: '30px', fontWeight: 800,
        color, letterSpacing: '-0.04em', marginBottom: '5px', lineHeight: 1,
        textShadow: isHovered ? `0 0 30px ${color}55` : 'none',
        transition: 'text-shadow 0.3s',
      }}>
        {value}
      </div>
      <div style={{ fontSize: '13px', fontWeight: 600, color: 'rgba(238,242,255,0.7)', marginBottom: '2px' }}>{label}</div>
      {sub && <div style={{ fontSize: '11px', color: 'rgba(238,242,255,0.28)', marginTop: '1px' }}>{sub}</div>}
    </div>
  )
}