website refactor

apps/website/templates/TeamLeaderboardTemplate.tsx

@@ -9,11 +9,11 @@ import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
-import TopThreePodium from '@/components/teams/TopThreePodium';
+import { ModalIcon } from '@/ui/ModalIcon';
+import { TeamPodium } from '@/ui/TeamPodium';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-import TeamRankingsFilter from '@/components/TeamRankingsFilter';
-import { TeamRankingsTable } from '@/components/teams/TeamRankingsTable';
+import { TeamFilter } from '@/ui/TeamFilter';
+import { TeamRankingsTable } from '@/ui/TeamRankingsTable';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
@@ -24,19 +24,19 @@ interface TeamLeaderboardTemplateProps {
   filterLevel: SkillLevel | 'all';
   sortBy: SortBy;
   onSearchChange: (query: string) => void;
-  onFilterLevelChange: (level: SkillLevel | 'all') => void;
+  filterLevelChange: (level: SkillLevel | 'all') => void;
   onSortChange: (sort: SortBy) => void;
   onTeamClick: (id: string) => void;
   onBackToTeams: () => void;
 }
 
-export default function TeamLeaderboardTemplate({
+export function TeamLeaderboardTemplate({
   teams,
   searchQuery,
   filterLevel,
   sortBy,
   onSearchChange,
-  onFilterLevelChange,
+  filterLevelChange,
   onSortChange,
   onTeamClick,
   onBackToTeams,
@@ -82,9 +82,12 @@ export default function TeamLeaderboardTemplate({
           </Box>
 
           <Stack direction="row" align="center" gap={4}>
-            <Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}>
-              <Icon icon={Award} size={7} color="#facc15" />
-            </Surface>
+            <ModalIcon 
+              icon={Award} 
+              color="text-yellow-400" 
+              bgColor="bg-yellow-400/10" 
+              borderColor="border-yellow-400/30" 
+            />
             <Box>
               <Heading level={1}>Team Leaderboard</Heading>
               <Text color="text-gray-400" block mt={1}>Rankings of all teams by performance metrics</Text>
@@ -93,18 +96,18 @@ export default function TeamLeaderboardTemplate({
         </Box>
 
         {/* Filters and Search */}
-        <TeamRankingsFilter
+        <TeamFilter
           searchQuery={searchQuery}
           onSearchChange={onSearchChange}
           filterLevel={filterLevel}
-          onFilterLevelChange={onFilterLevelChange}
+          onFilterLevelChange={filterLevelChange}
           sortBy={sortBy}
           onSortChange={onSortChange}
         />
 
         {/* Podium for Top 3 */}
         {sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
-          <TopThreePodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
+          <TeamPodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
         )}
 
         {/* Leaderboard Table */}