website refactor

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -6,6 +6,9 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Pagination } from '@/ui/Pagination';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
 import { ControlBar } from '@/ui/ControlBar';
 import { Trophy } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -55,9 +58,9 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <Stack gap={4}>
       <ControlBar>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <Group gap={2}>
           <Button
             variant={filter === 'all' ? 'primary' : 'secondary'}
             onClick={() => { setFilter('all'); setPage(1); }}
@@ -79,13 +82,13 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
           >
             Podiums
           </Button>
-        </div>
+        </Group>
       </ControlBar>
 
       <Card>
-        <div style={{ minHeight: '10rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Box minHeight="10rem" display="flex" alignItems="center" justifyContent="center">
           <Text variant="low">No results found for the selected filter.</Text>
-        </div>
+        </Box>
 
         <Pagination
           currentPage={page}
@@ -93,6 +96,6 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
           onPageChange={setPage}
         />
       </Card>
-    </div>
+    </Stack>
   );
 }