website refactor

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -11,8 +11,7 @@ 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';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 interface RaceHistoryProps {
   driverId: string;

apps/website/components/drivers/RatingBadge.tsx

@@ -3,10 +3,12 @@ import { Badge } from '@/ui/Badge';
 
 interface RatingBadgeProps {
   rating: number;
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
 }
 
 export function RatingBadge({ rating, size = 'md' }: RatingBadgeProps) {
+  const badgeSize = size === 'lg' ? 'md' : size;
+
   const getVariant = (val: number): 'warning' | 'primary' | 'success' | 'default' => {
     if (val >= 2500) return 'warning';
     if (val >= 2000) return 'primary'; // Simplified
@@ -18,7 +20,7 @@ export function RatingBadge({ rating, size = 'md' }: RatingBadgeProps) {
   return (
     <Badge 
       variant={getVariant(rating)}
-      size={size} 
+      size={badgeSize} 
     >
       {rating.toLocaleString()}
     </Badge>

apps/website/components/drivers/SafetyRatingBadge.tsx

@@ -56,7 +56,7 @@ export function SafetyRatingBadge({ rating, size = 'md' }: SafetyRatingBadgeProp
       border 
       bg={getBgColor(rating)}
       borderColor={getBorderColor(rating)}
-      {...sizeProps[size]}
+      {...(sizeProps[size] as any)}
     >
       <Shield size={iconSizes[size]} color={iconColors[colorClass as keyof typeof iconColors]} />
       <Text