website refactor

apps/website/templates/DriversTemplate.tsx

@@ -3,9 +3,11 @@
 import { DriversViewData } from '@/lib/types/view-data/DriversViewData';
 import { DriverCard } from '@/components/drivers/DriverCard';
 import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
+import { DriverGrid } from '@/components/drivers/DriverGrid';
 import { PageHeader } from '@/ui/PageHeader';
 import { Input } from '@/ui/Input';
-import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
 import { Search, Users } from 'lucide-react';
 import { EmptyState } from '@/ui/EmptyState';
 
@@ -28,32 +30,29 @@ export function DriversTemplate({
 }: DriversTemplateProps) {
   return (
     <main>
-      <Box marginBottom={8}>
-        <PageHeader
-          icon={Users}
-          title="Drivers"
-          description="Global driver roster and statistics."
-          action={
-            <Box 
-              as="button" 
-              onClick={onViewLeaderboard}
-              className="px-4 py-2 rounded-md bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-sm font-medium hover:bg-[var(--ui-color-bg-surface-muted)] transition-colors"
-            >
-              Leaderboard
-            </Box>
-          }
-        />
-      </Box>
+      <PageHeader
+        icon={Users}
+        title="Drivers"
+        description="Global driver roster and statistics."
+        action={
+          <Button 
+            variant="secondary" 
+            onClick={onViewLeaderboard}
+          >
+            Leaderboard
+          </Button>
+        }
+      />
 
-      <Box marginBottom={8}>
+      <Container size="full" padding="none" py={8}>
         <DriverStatsHeader
           totalDrivers={viewData.totalDriversLabel}
           activeDrivers={viewData.activeCountLabel}
           totalRaces={viewData.totalRacesLabel}
         />
-      </Box>
+      </Container>
 
-      <Box marginBottom={6} className="w-full">
+      <Container size="full" padding="none" py={6}>
         <Input
           placeholder="Search drivers by name or nationality..."
           value={searchQuery}
@@ -61,10 +60,10 @@ export function DriversTemplate({
           icon={Search}
           variant="search"
         />
-      </Box>
+      </Container>
 
       {filteredDrivers.length > 0 ? (
-        <Box display="grid" gap={4} className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <DriverGrid>
           {filteredDrivers.map(driver => (
             <DriverCard
               key={driver.id}
@@ -72,7 +71,7 @@ export function DriversTemplate({
               onClick={onDriverClick}
             />
           ))}
-        </Box>
+        </DriverGrid>
       ) : (
         <EmptyState
           title="No drivers found"