77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import { UserStats } from '../../api/types';
|
|
import { cn } from '../../utils/helpers';
|
|
import { formatNumber } from '../../utils/formatters';
|
|
import { Swords, Trophy, Target, TrendingUp, Clock, Award } from 'lucide-react';
|
|
|
|
interface ProfileStatsProps {
|
|
stats: UserStats;
|
|
className?: string;
|
|
}
|
|
|
|
export function ProfileStats({ stats, className }: ProfileStatsProps) {
|
|
const statCards = [
|
|
{
|
|
label: 'Матчей сыграно',
|
|
value: stats.matchesPlayed,
|
|
icon: Swords,
|
|
color: 'text-blue-400',
|
|
},
|
|
{
|
|
label: 'Побед',
|
|
value: stats.matchesWon,
|
|
icon: Trophy,
|
|
color: 'text-yellow-400',
|
|
},
|
|
{
|
|
label: 'Флагов захвачено',
|
|
value: stats.flagsCaptured,
|
|
icon: Target,
|
|
color: 'text-green-400',
|
|
},
|
|
{
|
|
label: 'Рейтинг',
|
|
value: formatNumber(stats.rating),
|
|
icon: TrendingUp,
|
|
color: 'text-purple-400',
|
|
},
|
|
{
|
|
label: 'Часов в игре',
|
|
value: stats.hoursPlayed,
|
|
icon: Clock,
|
|
color: 'text-orange-400',
|
|
},
|
|
{
|
|
label: 'Достижений',
|
|
value: stats.achievements?.length || 0,
|
|
icon: Award,
|
|
color: 'text-pink-400',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={cn('grid gap-4 sm:grid-cols-2 lg:grid-cols-3', className)}>
|
|
{statCards.map((stat) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<div
|
|
key={stat.label}
|
|
className="rounded-xl border border-border bg-card p-6"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">{stat.label}</p>
|
|
<p className="mt-2 text-2xl font-bold">{stat.value}</p>
|
|
</div>
|
|
<div className={cn('rounded-lg p-3', stat.color.replace('text-', 'bg-').replace('400', '500/20'))}>
|
|
<Icon className={cn('h-6 w-6', stat.color)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProfileStats;
|