website refactor

apps/website/components/drivers/RatingBadge.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface RatingBadgeProps {
+  rating: number;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+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';
+  };
+
+  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',
+  };
+
+  return (
+    <div className={`inline-flex items-center justify-center font-mono font-bold rounded border ${sizeMap[size]} ${getColor(rating)} ${className}`}>
+      {rating.toLocaleString()}
+    </div>
+  );
+}