website refactor

2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
--- a/apps/website/ui/TeamCardWrapper.tsx
+++ b/apps/website/ui/TeamCardWrapper.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import {
+  Zap,
+  Clock,
+  Languages,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield
+} from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
+import { TeamCard as UiTeamCard } from '@/ui/TeamCard';
+import { Icon } from '@/ui/Icon';
+import { TeamStatItem } from '@/ui/TeamStatItem';
+
+interface TeamCardProps {
+  id: string;
+  name: string;
+  description?: string;
+  logo?: string;
+  memberCount: number;
+  rating?: number | null;
+  totalWins?: number;
+  totalRaces?: number;
+  performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
+  isRecruiting?: boolean;
+  specialization?: 'endurance' | 'sprint' | 'mixed' | undefined;
+  region?: string;
+  languages?: string[] | undefined;
+  leagues?: string[];
+  category?: string;
+  onClick?: () => void;
+}
+
+function getPerformanceBadge(level?: string) {
+  switch (level) {
+    case 'pro':
+      return { icon: Crown, label: 'Pro', variant: 'warning' as const };
+    case 'advanced':
+      return { icon: Star, label: 'Advanced', variant: 'primary' as const };
+    case 'intermediate':
+      return { icon: TrendingUp, label: 'Intermediate', variant: 'info' as const };
+    case 'beginner':
+      return { icon: Shield, label: 'Beginner', variant: 'success' as const };
+    default:
+      return null;
+  }
+}
+
+function getSpecializationBadge(specialization?: string) {
+  switch (specialization) {
+    case 'endurance':
+      return { icon: Clock, label: 'Endurance', color: 'var(--warning-amber)' };
+    case 'sprint':
+      return { icon: Zap, label: 'Sprint', color: 'var(--neon-aqua)' };
+    default:
+      return null;
+  }
+}
+
+export function TeamCard({
+  name,
+  description,
+  logo,
+  memberCount,
+  rating,
+  totalWins,
+  totalRaces,
+  performanceLevel,
+  isRecruiting,
+  specialization,
+  region,
+  languages,
+  category,
+  onClick,
+}: TeamCardProps) {
+  const performanceBadge = getPerformanceBadge(performanceLevel);
+  const specializationBadge = getSpecializationBadge(specialization);
+
+  return (
+    <UiTeamCard
+      name={name}
+      description={description}
+      logo={logo}
+      memberCount={memberCount}
+      isRecruiting={isRecruiting}
+      onClick={onClick}
+      region={region}
+      performanceBadge={performanceBadge && (
+        <Badge variant={performanceBadge.variant} icon={performanceBadge.icon}>
+          {performanceBadge.label}
+        </Badge>
+      )}
+      specializationContent={specializationBadge && (
+        <Stack direction="row" align="center" gap={1}>
+          <Icon icon={specializationBadge.icon} size={3} color={specializationBadge.color} />
+          <Text size="xs" color="text-gray-500">{specializationBadge.label}</Text>
+        </Stack>
+      )}
+      categoryBadge={category && (
+        <Badge variant="primary">
+          <Box w="2" h="2" rounded="full" bg="bg-purple-500" mr={1.5} />
+          {category}
+        </Badge>
+      )}
+      languagesContent={languages && languages.length > 0 && (
+        <Box 
+          display="flex" 
+          alignItems="center" 
+          gap={1.5} 
+          px={2} 
+          py={1} 
+          rounded="md" 
+          bg="bg-iron-gray/50" 
+          border 
+          borderColor="border-charcoal-outline/30"
+        >
+          <Icon icon={Languages} size={3} color="var(--neon-purple)" />
+          <Text size="xs" color="text-gray-400">
+            {languages.slice(0, 2).join(', ')}
+            {languages.length > 2 && ` +${languages.length - 2}`}
+          </Text>
+        </Box>
+      )}
+      statsContent={
+        <>
+          <TeamStatItem label="Rating" value={typeof rating === 'number' ? Math.round(rating).toLocaleString() : '—'} color="text-primary-blue" align="center" />
+          <TeamStatItem label="Wins" value={totalWins ?? 0} color="text-performance-green" align="center" />
+          <TeamStatItem label="Races" value={totalRaces ?? 0} color="text-white" align="center" />
+        </>
+      }
+    />
+  );
+}