website refactor

apps/website/components/drivers/RatingBadge.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Badge } from '@/ui/Badge';
 
 interface RatingBadgeProps {
   rating: number;
@@ -8,22 +9,29 @@ interface RatingBadgeProps {
 
 export function RatingBadge({ rating, size = 'md', className = '' }: RatingBadgeProps) {
   const getColor = (val: number) => {
-    if (val >= 2500) return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/20';
-    if (val >= 2000) return 'text-purple-400 bg-purple-400/10 border-purple-400/20';
-    if (val >= 1500) return 'text-primary-blue bg-primary-blue/10 border-primary-blue/20';
-    if (val >= 1000) return 'text-performance-green bg-performance-green/10 border-performance-green/20';
-    return 'text-gray-400 bg-gray-400/10 border-gray-400/20';
+    if (val >= 2500) return { variant: 'warning' as const };
+    if (val >= 2000) return { color: 'text-purple-400', bg: 'bg-purple-400/10', borderColor: 'border-purple-400/20' };
+    if (val >= 1500) return { variant: 'primary' as const };
+    if (val >= 1000) return { variant: 'success' as const };
+    return { variant: 'default' as const };
   };
 
-  const sizeMap = {
-    sm: 'px-1.5 py-0.5 text-[10px]',
-    md: 'px-2 py-1 text-xs',
-    lg: 'px-3 py-1.5 text-sm',
+  const sizeMap: Record<string, 'xs' | 'sm' | 'md'> = {
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
   };
 
+  const config = getColor(rating);
+
   return (
-    <div className={`inline-flex items-center justify-center font-mono font-bold rounded border ${sizeMap[size]} ${getColor(rating)} ${className}`}>
+    <Badge 
+      {...config}
+      size={sizeMap[size]} 
+      className={`font-mono ${className}`}
+      rounded="sm"
+    >
       {rating.toLocaleString()}
-    </div>
+    </Badge>
   );
 }