website refactor

apps/website/templates/DriverRankingsTemplate.tsx

@@ -1,81 +1,67 @@
 'use client';
 
 import React from 'react';
-import { Trophy, ArrowLeft } from 'lucide-react';
-import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { Trophy } from 'lucide-react';
 import { Container } from '@/ui/Container';
-import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
 import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
-import { RankingsPodium } from '@/ui/RankingsPodium';
-import { RankingsTable } from '@/ui/RankingsTable';
+import { LeaderboardHeader } from '@/components/leaderboards/LeaderboardHeader';
+import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
+import { LeaderboardPodium } from '@/components/leaderboards/LeaderboardPodium';
+import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';
 
 interface DriverRankingsTemplateProps {
   viewData: DriverRankingsViewData;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
   onDriverClick?: (id: string) => void;
   onBackToLeaderboards?: () => void;
 }
 
 export function DriverRankingsTemplate({
   viewData,
+  searchQuery,
+  onSearchChange,
   onDriverClick,
   onBackToLeaderboards,
 }: DriverRankingsTemplateProps): React.ReactElement {
   return (
     <Container size="lg" py={8}>
-      <Stack gap={8}>
-        {/* Header */}
-        <Box>
-          {onBackToLeaderboards && (
-            <Box mb={6}>
-              <Button
-                variant="secondary"
-                onClick={onBackToLeaderboards}
-                icon={<Icon icon={ArrowLeft} size={4} />}
-              >
-                Back to Leaderboards
-              </Button>
-            </Box>
-          )}
+      <LeaderboardHeader
+        title="Driver Leaderboard"
+        description="Full rankings of all drivers by performance metrics"
+        icon={Trophy}
+        onBack={onBackToLeaderboards}
+        backLabel="Back to Leaderboards"
+      />
 
-          <Stack direction="row" align="center" gap={4}>
-            <Surface variant="muted" rounded="xl" padding={3} bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))" border borderColor="border-blue-500/20">
-              <Icon icon={Trophy} size={7} color="#3b82f6" />
-            </Surface>
-            <Box>
-              <Heading level={1}>Driver Leaderboard</Heading>
-              <Text color="text-gray-400" block mt={1}>Full rankings of all drivers by performance metrics</Text>
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Top 3 Podium */}
-        {viewData.podium.length > 0 && (
-          <RankingsPodium 
-            podium={viewData.podium.map(d => ({
-              ...d,
-              rating: Number(d.rating),
-              wins: Number(d.wins),
-              podiums: Number(d.podiums)
-            }))} 
-            onDriverClick={onDriverClick} 
-          />
-        )}
-
-        {/* Leaderboard Table */}
-        <RankingsTable 
-          drivers={viewData.drivers.map(d => ({
+      {/* Top 3 Podium */}
+      {viewData.podium.length > 0 && !searchQuery && (
+        <LeaderboardPodium 
+          podium={viewData.podium.map(d => ({
             ...d,
             rating: Number(d.rating),
-            wins: Number(d.wins)
+            wins: Number(d.wins),
+            podiums: Number(d.podiums)
           }))} 
           onDriverClick={onDriverClick} 
         />
-      </Stack>
+      )}
+
+      <LeaderboardFiltersBar 
+        searchQuery={searchQuery}
+        onSearchChange={onSearchChange}
+        placeholder="Search drivers..."
+      />
+
+      {/* Leaderboard Table */}
+      <LeaderboardTable 
+        drivers={viewData.drivers.map(d => ({
+          ...d,
+          rating: Number(d.rating),
+          wins: Number(d.wins)
+        }))} 
+        onDriverClick={onDriverClick} 
+      />
     </Container>
   );
 }