56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Card from './Card';
|
|
|
|
interface StatCardProps {
|
|
icon: React.ElementType;
|
|
label: string;
|
|
value: string;
|
|
subValue?: string;
|
|
color?: string;
|
|
bgColor?: string;
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Statistics card component for displaying metrics with icon, label, value, and optional trend.
|
|
* Used in dashboards and overview sections.
|
|
*/
|
|
export default function StatCard({
|
|
icon: Icon,
|
|
label,
|
|
value,
|
|
subValue,
|
|
color = 'text-primary-blue',
|
|
bgColor = 'bg-primary-blue/10',
|
|
trend,
|
|
}: StatCardProps) {
|
|
return (
|
|
<Card className="p-5">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className={`p-2 rounded-lg ${bgColor}`}>
|
|
<Icon className={`w-4 h-4 ${color}`} />
|
|
</div>
|
|
<span className="text-sm text-gray-400">{label}</span>
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{value}</div>
|
|
{subValue && (
|
|
<div className="text-xs text-gray-500 mt-1">{subValue}</div>
|
|
)}
|
|
</div>
|
|
{trend && (
|
|
<div className={`flex items-center gap-1 text-sm ${trend.isPositive ? 'text-performance-green' : 'text-racing-red'}`}>
|
|
<span>{trend.isPositive ? '↑' : '↓'}</span>
|
|
<span>{Math.abs(trend.value)}%</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |