64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { TrendingUp, TrendingDown } from 'lucide-react';
|
|
import { StatValue, StatLabel } from '../ui/Typography';
|
|
|
|
interface StatsCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
change?: number;
|
|
icon: any;
|
|
color?: string;
|
|
}
|
|
|
|
export const StatsCard = ({
|
|
title,
|
|
value,
|
|
change,
|
|
icon: Icon,
|
|
color = 'blue'
|
|
}: StatsCardProps) => {
|
|
const colorClasses = {
|
|
blue: 'bg-blue-500',
|
|
green: 'bg-green-500',
|
|
yellow: 'bg-yellow-500',
|
|
red: 'bg-red-500',
|
|
purple: 'bg-purple-500',
|
|
};
|
|
|
|
const isPositive = change && change > 0;
|
|
const isNegative = change && change < 0;
|
|
|
|
return (
|
|
<div className="card p-4 sm:p-5 lg:p-6 animate-fade-in">
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0">
|
|
<div className={`p-3 sm:p-4 rounded-xl ${colorClasses[color as keyof typeof colorClasses] || colorClasses.blue} shadow-sm`}>
|
|
<Icon className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
|
|
</div>
|
|
</div>
|
|
<div className="mr-3 sm:mr-5 w-0 flex-1 min-w-0">
|
|
<dl>
|
|
<StatLabel className="truncate">
|
|
{title}
|
|
</StatLabel>
|
|
<dd className="flex items-baseline">
|
|
<StatValue className="truncate">
|
|
{typeof value === 'number' ? value.toLocaleString() : value}
|
|
</StatValue>
|
|
{change !== undefined && (
|
|
<div className={`mr-1 sm:mr-2 flex items-baseline text-xs sm:text-sm font-semibold ${isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-gray-500'
|
|
}`}>
|
|
{isPositive && <TrendingUp className="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0 self-center ml-1" />}
|
|
{isNegative && <TrendingDown className="h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0 self-center ml-1" />}
|
|
<span className="sr-only">
|
|
{isPositive ? 'افزایش' : 'کاهش'}
|
|
</span>
|
|
<span className="truncate">{Math.abs(change)}%</span>
|
|
</div>
|
|
)}
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|