website refactor

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -1,14 +1,15 @@
 'use client';
 
-import { EmptyState } from '@/components/shared/state/EmptyState';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Pagination } from '@/ui/Pagination';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { ControlBar } from '@/ui/ControlBar';
 import { Trophy } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import React from 'react';
 
 interface RaceHistoryProps {
   driverId: string;
@@ -24,7 +25,6 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
     async function loadRaceHistory() {
       try {
         // Driver race history is not exposed via API yet.
-        // Keep as placeholder until an endpoint exists.
       } catch (err) {
         console.error('Failed to load race history:', err);
       } finally {
@@ -40,18 +40,7 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
   const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
 
   if (loading) {
-    return (
-      <Stack gap={4}>
-        <Stack display="flex" alignItems="center" gap={2}>
-          {[1, 2, 3].map(i => (
-            <Stack key={i} h="9" w="24" bg="bg-iron-gray" rounded="md" animate="pulse" />
-          ))}
-        </Stack>
-        <Card>
-          <LoadingWrapper variant="skeleton" skeletonCount={3} />
-        </Card>
-      </Stack>
-    );
+    return <LoadingWrapper variant="spinner" message="Loading race history..." />;
   }
 
   if (filteredResults.length === 0) {
@@ -60,50 +49,50 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
         icon={Trophy}
         title="No race history yet"
         description="Complete races to build your racing record"
+        variant="minimal"
       />
     );
   }
 
   return (
-    <Stack gap={4}>
-      <Stack display="flex" alignItems="center" gap={2}>
-        <Button
-          variant={filter === 'all' ? 'primary' : 'secondary'}
-          onClick={() => { setFilter('all'); setPage(1); }}
-          size="sm"
-        >
-          All Races
-        </Button>
-        <Button
-          variant={filter === 'wins' ? 'primary' : 'secondary'}
-          onClick={() => { setFilter('wins'); setPage(1); }}
-          size="sm"
-        >
-          Wins Only
-        </Button>
-        <Button
-          variant={filter === 'podiums' ? 'primary' : 'secondary'}
-          onClick={() => { setFilter('podiums'); setPage(1); }}
-          size="sm"
-        >
-          Podiums
-        </Button>
-      </Stack>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <ControlBar>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Button
+            variant={filter === 'all' ? 'primary' : 'secondary'}
+            onClick={() => { setFilter('all'); setPage(1); }}
+            size="sm"
+          >
+            All Races
+          </Button>
+          <Button
+            variant={filter === 'wins' ? 'primary' : 'secondary'}
+            onClick={() => { setFilter('wins'); setPage(1); }}
+            size="sm"
+          >
+            Wins Only
+          </Button>
+          <Button
+            variant={filter === 'podiums' ? 'primary' : 'secondary'}
+            onClick={() => { setFilter('podiums'); setPage(1); }}
+            size="sm"
+          >
+            Podiums
+          </Button>
+        </div>
+      </ControlBar>
 
       <Card>
-        {/* No results until API provides driver results */}
-        <Stack minHeight="100px" display="flex" center>
-          <Text color="text-gray-500">No results found for the selected filter.</Text>
-        </Stack>
+        <div style={{ minHeight: '10rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Text variant="low">No results found for the selected filter.</Text>
+        </div>
 
         <Pagination
           currentPage={page}
           totalPages={totalPages}
-          totalItems={filteredResults.length}
-          itemsPerPage={resultsPerPage}
           onPageChange={setPage}
         />
       </Card>
-    </Stack>
+    </div>
   );
 }