website refactor

apps/website/templates/DriversTemplate.tsx

@@ -1,30 +1,14 @@
 'use client';
 
 import React from 'react';
-import {
-  Search,
-  Crown,
-  Users,
-  Trophy,
-} from 'lucide-react';
-import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
+import { Search } from 'lucide-react';
 import { Container } from '@/ui/Container';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
-import { Surface } from '@/ui/Surface';
-import { Icon } from '@/ui/Icon';
-import { FeaturedDriverCard } from '@/components/drivers/FeaturedDriverCard';
-import { SkillDistribution } from '@/ui/SkillDistribution';
-import { CategoryDistribution } from '@/ui/CategoryDistribution';
-import { LeaderboardPreview } from '@/components/leaderboards/LeaderboardPreview';
-import { RecentActivity } from '@/components/feed/RecentActivity';
-import { PageHero } from '@/ui/PageHero';
-import { DriversSearch } from '@/ui/DriversSearch';
+import { Stack } from '@/ui/Stack';
+import { DriversDirectoryHeader } from '@/components/drivers/DriversDirectoryHeader';
+import { DriverSearchBar } from '@/components/drivers/DriverSearchBar';
+import { DriverTable } from '@/components/drivers/DriverTable';
+import { DriverTableRow } from '@/components/drivers/DriverTableRow';
 import { EmptyState } from '@/components/shared/state/EmptyState';
-import { NumberDisplay } from '@/lib/display-objects/NumberDisplay';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 
 interface DriversTemplateProps {
@@ -49,80 +33,34 @@ export function DriversTemplate({
   const totalWins = viewData?.totalWins || 0;
   const activeCount = viewData?.activeCount || 0;
 
-  // Featured drivers (top 4)
-  const featuredDrivers = filteredDrivers.slice(0, 4);
-
   return (
     <Container size="lg" py={8}>
       <Stack gap={10}>
-        {/* Hero Section */}
-        <PageHero
-          title="Drivers"
-          description="Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid."
-          icon={Users}
-          stats={[
-            { label: 'drivers', value: drivers.length, color: 'text-primary-blue' },
-            { label: 'active', value: activeCount, color: 'text-performance-green', animate: true },
-            { label: 'total wins', value: NumberDisplay.format(totalWins), color: 'text-warning-amber' },
-            { label: 'races', value: NumberDisplay.format(totalRaces), color: 'text-neon-aqua' },
-          ]}
-          actions={[
-            {
-              label: 'View Leaderboard',
-              onClick: onViewLeaderboard,
-              icon: Trophy,
-              description: 'See full driver rankings'
-            }
-          ]}
+        <DriversDirectoryHeader
+          totalDrivers={drivers.length}
+          activeDrivers={activeCount}
+          totalWins={totalWins}
+          totalRaces={totalRaces}
+          onViewLeaderboard={onViewLeaderboard}
         />
 
-        {/* Search */}
-        <DriversSearch query={searchQuery} onChange={onSearchChange} />
+        <DriverSearchBar query={searchQuery} onChange={onSearchChange} />
 
-        {/* Featured Drivers */}
-        {!searchQuery && (
-          <Box>
-            <Stack direction="row" align="center" gap={3} mb={4}>
-              <Surface variant="muted" rounded="xl" padding={2}>
-                <Icon icon={Crown} size={6} color="#f59e0b" />
-              </Surface>
-              <Box>
-                <Heading level={2}>Featured Drivers</Heading>
-                <Text size="xs" color="text-gray-500">Top performers on the grid</Text>
-              </Box>
-            </Stack>
+        <DriverTable>
+          {filteredDrivers.map((driver, index) => (
+            <DriverTableRow
+              key={driver.id}
+              rank={index + 1}
+              name={driver.name}
+              avatarUrl={driver.avatarUrl}
+              nationality={driver.nationality}
+              rating={driver.rating}
+              wins={driver.wins}
+              onClick={() => onDriverClick(driver.id)}
+            />
+          ))}
+        </DriverTable>
 
-            <Grid cols={4} gap={4}>
-              {featuredDrivers.map((driver, index) => (
-                <GridItem key={driver.id} colSpan={12} mdSpan={6} lgSpan={3}>
-                  <FeaturedDriverCard
-                    driver={driver}
-                    position={index + 1}
-                    onClick={() => onDriverClick(driver.id)}
-                  />
-                </GridItem>
-              ))}
-            </Grid>
-          </Box>
-        )}
-
-        {/* Active Drivers */}
-        {!searchQuery && <RecentActivity drivers={drivers} onDriverClick={onDriverClick} />}
-
-        {/* Skill Distribution */}
-        {!searchQuery && <SkillDistribution drivers={drivers} />}
-
-        {/* Category Distribution */}
-        {!searchQuery && <CategoryDistribution drivers={drivers} />}
-
-        {/* Leaderboard Preview */}
-        <LeaderboardPreview 
-          drivers={filteredDrivers} 
-          onDriverClick={onDriverClick} 
-          onNavigate={() => onViewLeaderboard()}
-        />
-
-        {/* Empty State */}
         {filteredDrivers.length === 0 && (
           <EmptyState
             icon={Search}