upd

src/components/profile/ProfileStats.tsx

@@ -0,0 +1,76 @@
+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;