website refactor

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -1,14 +1,21 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import Card from '../ui/Card';
-import Button from '../ui/Button';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
+import { EmptyState } from '@/ui/EmptyState';
+import { Pagination } from '@/ui/Pagination';
+import { Trophy } from 'lucide-react';
 
 interface RaceHistoryProps {
   driverId: string;
 }
 
-export default function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
+export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
   const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
@@ -32,94 +39,72 @@ export default function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
   const filteredResults: Array<unknown> = [];
 
   const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
-  const paginatedResults = filteredResults.slice(
-    (page - 1) * resultsPerPage,
-    page * resultsPerPage
-  );
 
   if (loading) {
     return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
+      <Stack gap={4}>
+        <Box display="flex" alignItems="center" gap={2}>
           {[1, 2, 3].map(i => (
-            <div key={i} className="h-9 w-24 bg-iron-gray rounded animate-pulse" />
+            <Box key={i} h="9" w="24" bg="bg-iron-gray" rounded="md" animate="pulse" />
           ))}
-        </div>
+        </Box>
         <Card>
-          <div className="space-y-2">
-            {[1, 2, 3].map(i => (
-              <div key={i} className="h-20 bg-deep-graphite rounded animate-pulse" />
-            ))}
-          </div>
+          <LoadingWrapper variant="skeleton" skeletonCount={3} />
         </Card>
-      </div>
+      </Stack>
     );
   }
 
   if (filteredResults.length === 0) {
     return (
-      <Card className="text-center py-12">
-        <p className="text-gray-400 mb-2">No race history yet</p>
-        <p className="text-sm text-gray-500">Complete races to build your racing record</p>
-      </Card>
+      <EmptyState
+        icon={Trophy}
+        title="No race history yet"
+        description="Complete races to build your racing record"
+      />
     );
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2">
+    <Stack gap={4}>
+      <Box display="flex" alignItems="center" gap={2}>
         <Button
           variant={filter === 'all' ? 'primary' : 'secondary'}
           onClick={() => { setFilter('all'); setPage(1); }}
-          className="text-sm"
+          size="sm"
         >
           All Races
         </Button>
         <Button
           variant={filter === 'wins' ? 'primary' : 'secondary'}
           onClick={() => { setFilter('wins'); setPage(1); }}
-          className="text-sm"
+          size="sm"
         >
           Wins Only
         </Button>
         <Button
           variant={filter === 'podiums' ? 'primary' : 'secondary'}
           onClick={() => { setFilter('podiums'); setPage(1); }}
-          className="text-sm"
+          size="sm"
         >
           Podiums
         </Button>
-      </div>
+      </Box>
 
       <Card>
-        <div className="space-y-2">
-          {/* No results until API provides driver results */}
-        </div>
+        {/* No results until API provides driver results */}
+        <Box minHeight="100px" display="flex" center>
+          <Text color="text-gray-500">No results found for the selected filter.</Text>
+        </Box>
 
-        {totalPages > 1 && (
-          <div className="flex items-center justify-center gap-2 mt-4 pt-4 border-t border-charcoal-outline">
-            <Button
-              variant="secondary"
-              onClick={() => setPage(p => Math.max(1, p - 1))}
-              disabled={page === 1}
-              className="text-sm"
-            >
-              Previous
-            </Button>
-            <span className="text-gray-400 text-sm">
-              Page {page} of {totalPages}
-            </span>
-            <Button
-              variant="secondary"
-              onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-              disabled={page === totalPages}
-              className="text-sm"
-            >
-              Next
-            </Button>
-          </div>
-        )}
+        <Pagination
+          currentPage={page}
+          totalPages={totalPages}
+          totalItems={filteredResults.length}
+          itemsPerPage={resultsPerPage}
+          onPageChange={setPage}
+        />
       </Card>
-    </div>
+    </Stack>
   );
 }