website refactor

apps/website/components/teams/TeamLeaderboardPreviewWrapper.tsx

@@ -1,19 +1,10 @@
 import React from 'react';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { TeamLeaderboardPreview as SemanticTeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
+import type { LeaderboardTeamItem } from '@/lib/view-data/LeaderboardTeamItem';
 
 interface TeamLeaderboardPreviewProps {
-  topTeams: Array<{
-    id: string;
-    name: string;
-    logoUrl?: string;
-    category?: string;
-    memberCount: number;
-    totalWins: number;
-    isRecruiting: boolean;
-    rating?: number;
-    performanceLevel: string;
-  }>;
+  topTeams: LeaderboardTeamItem[];
   onTeamClick: (id: string) => void;
   onViewFullLeaderboard: () => void;
 }
@@ -27,15 +18,17 @@ export function TeamLeaderboardPreview({
 
   return (
     <SemanticTeamLeaderboardPreview
-      teams={topTeams.map((team, index) => ({
+      teams={topTeams.map((team) => ({
         id: team.id,
         name: team.name,
-        tag: '', // Not available in this view data
+        tag: team.tag,
         memberCount: team.memberCount,
         category: team.category,
         totalWins: team.totalWins,
         logoUrl: team.logoUrl || getMediaUrl('team-logo', team.id),
-        position: index + 1
+        position: team.position,
+        rating: team.rating,
+        performanceLevel: team.performanceLevel
       }))}
       onTeamClick={onTeamClick}
       onNavigateToTeams={onViewFullLeaderboard}

apps/website/components/teams/TeamsHeader.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
 
 interface TeamsHeaderProps {
   title: string;
@@ -10,24 +11,32 @@ interface TeamsHeaderProps {
 
 export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
   return (
-    <div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
-      <div className="space-y-2">
-        <div className="flex items-center gap-3">
-          <div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
+    <Box 
+      marginBottom={12} 
+      display="flex" 
+      flexDirection={{ base: 'col', md: 'row' }} 
+      alignItems={{ md: 'end' }} 
+      justifyContent="space-between" 
+      gap={6} 
+      className="border-b border-[var(--ui-color-border-muted)] pb-8"
+    >
+      <Box className="space-y-2">
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box width={1} height={8} className="bg-[var(--ui-color-intent-primary)]" />
           <Heading level={1} weight="bold" uppercase>{title}</Heading>
-        </div>
+        </Box>
         {subtitle && (
           <Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
             {subtitle}
           </Text>
         )}
-      </div>
+      </Box>
       
       {action && (
-        <div className="flex items-center">
+        <Box display="flex" alignItems="center">
           {action}
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 }