website refactor

apps/website/ui/TeamCard.tsx

@@ -1,81 +1,115 @@
-import { ChevronRight, Globe, Users } from 'lucide-react';
+import { ChevronRight, Globe, Users, Zap } from 'lucide-react';
 import { ReactNode } from 'react';
-import { Badge } from './Badge';
-import { Box } from './Box';
 import { Card } from './Card';
 import { Heading } from './Heading';
 import { Icon } from './Icon';
 import { Text } from './Text';
+import { Badge } from './Badge';
 
 export interface TeamCardProps {
   name: string;
-  description?: string;
+  leagueName?: string;
   logo?: ReactNode;
   memberCount: number;
-  isRecruiting?: boolean;
-  badges?: ReactNode;
+  rating?: string;
+  wins?: string;
+  races?: string;
   region?: string;
+  isRecruiting?: boolean;
+  performanceLevel?: string;
   onClick?: () => void;
+  description?: string;
 }
 
 export const TeamCard = ({ 
   name, 
-  description, 
+  leagueName,
   logo, 
   memberCount, 
-  isRecruiting, 
-  badges,
-  region,
+  rating,
+  wins,
+  races,
+  region = 'EU',
+  isRecruiting,
+  performanceLevel,
+  description,
   onClick 
 }: TeamCardProps) => {
   return (
     <Card 
-      variant="dark" 
-      onClick={onClick} 
-      style={{ cursor: onClick ? 'pointer' : 'default', height: '100%', display: 'flex', flexDirection: 'column' }}
+      variant="precision" 
+      padding="none" 
+      onClick={onClick}
+      transition
     >
-      <Box display="flex" gap={4} marginBottom={4}>
-        <Box width={16} height={16} rounded="lg" bg="var(--ui-color-bg-surface-muted)" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden', flexShrink: 0 }}>
-          {logo}
-        </Box>
-        <Box flex={1} minWidth="0">
-          <Box display="flex" alignItems="start" justifyContent="between" gap={2}>
-            <Heading level={4} weight="bold" truncate>{name}</Heading>
-            {isRecruiting && <Badge variant="success" size="sm">RECRUITING</Badge>}
-          </Box>
-          <Box display="flex" gap={2} flexWrap="wrap" marginTop={2}>
-            {badges}
-          </Box>
-        </Box>
-      </Box>
-
-      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
-        {description || 'No description available'}
-      </Text>
-
-      {region && (
-        <Box marginBottom={4}>
-          <Badge variant="default" size="sm">
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-              <Icon icon={Globe} size={3} intent="primary" />
-              <Text size="xs" weight="bold">{region}</Text>
+      <div className="p-6 space-y-6">
+        {/* Header: Logo and Identity */}
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 bg-[var(--ui-color-bg-base)] flex items-center justify-center overflow-hidden border border-[var(--ui-color-border-muted)]">
+            {logo || <Icon icon={Users} size={5} intent="low" />}
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between gap-2">
+              <Heading level={4} weight="bold" truncate uppercase>{name}</Heading>
+              {isRecruiting && (
+                <Badge variant="success" size="xs">RECRUITING</Badge>
+              )}
             </div>
-          </Badge>
-        </Box>
-      )}
+            <div className="flex items-center gap-2">
+              {leagueName && <Text size="xs" variant="low" truncate uppercase mono>{leagueName}</Text>}
+              {performanceLevel && (
+                <div className="flex items-center gap-1">
+                  <Icon icon={Zap} size={3} intent="telemetry" />
+                  <Text size="xs" variant="telemetry" mono uppercase>{performanceLevel}</Text>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
 
-      <Box marginTop="auto" paddingTop={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
-        <Box display="flex" alignItems="center" gap={2}>
-          <Icon icon={Users} size={3} intent="low" />
-          <Text size="xs" variant="low" font="mono">
-            {memberCount} {memberCount === 1 ? 'MEMBER' : 'MEMBERS'}
+        {/* Technical Stats Grid - Engineered Look */}
+        {(rating || wins || races) && (
+          <div className="grid grid-cols-3 gap-px bg-[var(--ui-color-border-muted)] border border-[var(--ui-color-border-muted)]">
+            <div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
+              <Text size="xs" variant="low" uppercase block mb={1} mono>Rating</Text>
+              <Text size="md" weight="bold" mono variant="primary">{rating || '-'}</Text>
+            </div>
+            <div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
+              <Text size="xs" variant="low" uppercase block mb={1} mono>Wins</Text>
+              <Text size="md" weight="bold" mono variant="telemetry">{wins || '-'}</Text>
+            </div>
+            <div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
+              <Text size="xs" variant="low" uppercase block mb={1} mono>Races</Text>
+              <Text size="md" weight="bold" mono variant="high">{races || '-'}</Text>
+            </div>
+          </div>
+        )}
+
+        {description && (
+          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
+            {description}
           </Text>
-        </Box>
-        <Box display="flex" alignItems="center" gap={1}>
-          <Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
-          <Icon icon={ChevronRight} size={3} intent="low" />
-        </Box>
-      </Box>
+        )}
+
+        {/* Footer: Metadata */}
+        <div className="flex items-center justify-between pt-4 border-t border-[var(--ui-color-border-muted)]">
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-1.5">
+              <Icon icon={Users} size={3} intent="low" />
+              <Text size="xs" variant="low" mono>{memberCount}</Text>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <Icon icon={Globe} size={3} intent="low" />
+              <Text size="xs" variant="low" mono>{region}</Text>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-1 text-[var(--ui-color-intent-primary)]">
+            <Text size="xs" weight="bold" uppercase mono>Details</Text>
+            <Icon icon={ChevronRight} size={3} />
+          </div>
+        </div>
+      </div>
     </Card>
   );
 };