File size: 1,884 Bytes
619120c | 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 | import React from 'react';
const StatsCard = ({ title, value, icon: Icon, trend }) => {
return (
<div className="glass-panel" style={{ padding: 'var(--space-lg)', position: 'relative', overflow: 'hidden' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div>
<p style={{ color: 'var(--text-muted)', fontSize: '0.875rem', marginBottom: 'var(--space-xs)' }}>{title}</p>
<h3 style={{ fontSize: '2rem', fontWeight: 'bold' }} className="text-glow">{value}</h3>
{trend && (
<div style={{ marginTop: 'var(--space-sm)', fontSize: '0.75rem', color: trend > 0 ? 'var(--status-online)' : 'var(--status-offline)' }}>
{trend > 0 ? '↑' : '↓'} {Math.abs(trend)}% from last hour
</div>
)}
</div>
<div style={{
padding: '12px',
borderRadius: '12px',
background: 'rgba(0, 240, 255, 0.1)',
color: 'var(--primary)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<Icon size={24} />
</div>
</div>
{/* Decorative Glow */}
<div style={{
position: 'absolute',
bottom: '-20px',
right: '-20px',
width: '100px',
height: '100px',
background: 'var(--primary)',
filter: 'blur(50px)',
opacity: 0.1,
pointerEvents: 'none'
}} />
</div>
);
};
export default StatsCard;
|