| 1 | 'use client'; |
| 2 | |
| 3 | export default function StatCard({title, value, change, trend, sparkline}) { |
| 4 | return ( |
| 5 | <div className="stat-card"> |
| 6 | <div className="stat-card-header"> |
| 7 | <span className="stat-card-title">{title}</span> |
| 8 | <span className={'stat-card-change trend-' + trend}>{change}</span> |
| 9 | </div> |
| 10 | <div className="stat-card-value">{value}</div> |
| 11 | <div className="stat-card-sparkline"> |
| 12 | {sparkline.map((point, i) => ( |
| 13 | <span |
| 14 | key={i} |
| 15 | className="sparkline-bar" |
| 16 | style={{ |
| 17 | height: Math.round((point / Math.max(...sparkline)) * 100) + '%', |
| 18 | }} |
| 19 | /> |
| 20 | ))} |
| 21 | </div> |
| 22 | </div> |
| 23 | ); |
| 24 | } |