website refactor

apps/website/templates/DriversTemplate.tsx

@@ -1,18 +1,16 @@
 'use client';
 
-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 { DriversViewData } from '@/lib/types/view-data/DriversViewData';
+import { DriverCard } from '@/components/drivers/DriverCard';
+import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
+import { PageHeader } from '@/ui/PageHeader';
+import { Input } from '@/ui/Input';
+import { Box } from '@/ui/Box';
+import { Search, Users } from 'lucide-react';
 import { EmptyState } from '@/ui/EmptyState';
-import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
-import { Container } from '@/ui/Container';
-import { Group } from '@/ui/Group';
-import { Search } from 'lucide-react';
-import React from 'react';
 
 interface DriversTemplateProps {
-  viewData: DriversViewData | null;
+  viewData: DriversViewData;
   searchQuery: string;
   onSearchChange: (query: string) => void;
   filteredDrivers: DriversViewData['drivers'];
@@ -20,7 +18,7 @@ interface DriversTemplateProps {
   onViewLeaderboard: () => void;
 }
 
-export function DriversTemplate({ 
+export function DriversTemplate({
   viewData,
   searchQuery,
   onSearchChange,
@@ -29,47 +27,59 @@ export function DriversTemplate({
   onViewLeaderboard
 }: DriversTemplateProps) {
   return (
-    <Container size="lg" py={8}>
-      <Group direction="column" gap={10} fullWidth>
-        <DriversDirectoryHeader
-          totalDriversLabel={viewData?.totalDriversLabel || '0'}
-          activeDriversLabel={viewData?.activeCountLabel || '0'}
-          totalWinsLabel={viewData?.totalWinsLabel || '0'}
-          totalRacesLabel={viewData?.totalRacesLabel || '0'}
-          onViewLeaderboard={onViewLeaderboard}
+    <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>
 
-        <DriverSearchBar query={searchQuery} onChange={onSearchChange} />
+      <Box marginBottom={8}>
+        <DriverStatsHeader
+          totalDrivers={viewData.totalDriversLabel}
+          activeDrivers={viewData.activeCountLabel}
+          totalRaces={viewData.totalRacesLabel}
+        />
+      </Box>
 
-        <DriverTable>
-          {filteredDrivers.map((driver, index) => (
-            <DriverTableRow
+      <Box marginBottom={6} className="w-full">
+        <Input
+          placeholder="Search drivers by name or nationality..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          icon={Search}
+          variant="search"
+        />
+      </Box>
+
+      {filteredDrivers.length > 0 ? (
+        <Box display="grid" gap={4} className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {filteredDrivers.map(driver => (
+            <DriverCard
               key={driver.id}
-              rank={index + 1}
-              name={driver.name}
-              avatarUrl={driver.avatarUrl}
-              nationality={driver.nationality}
-              rating={driver.rating}
-              ratingLabel={driver.ratingLabel}
-              winsLabel={String(driver.wins)}
-              onClick={() => onDriverClick(driver.id)}
+              driver={driver}
+              onClick={onDriverClick}
             />
           ))}
-        </DriverTable>
-
-        {filteredDrivers.length === 0 && (
-          <EmptyState
-            icon={Search}
-            title="No drivers found"
-            description={`No drivers found matching "${searchQuery}"`}
-            action={{
-              label: 'Clear search',
-              onClick: () => onSearchChange(''),
-              variant: 'secondary'
-            }}
-          />
-        )}
-      </Group>
-    </Container>
+        </Box>
+      ) : (
+        <EmptyState
+          title="No drivers found"
+          description={`No drivers match "${searchQuery}"`}
+          icon={Search}
+        />
+      )}
+    </main>
   );
 }