website refactor

apps/website/components/drivers/DriverRatingPill.tsx

@@ -0,0 +1,31 @@
+
+
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Text } from '@/ui/Text';
+import { Star, Trophy } from 'lucide-react';
+
+interface DriverRatingPillProps {
+  rating: number | null;
+  rank: number | null;
+}
+
+export function DriverRatingPill({ rating, rank }: DriverRatingPillProps) {
+  return (
+    <Box display="flex" alignItems="center" gap={2} mt={0.5} style={{ fontSize: '11px' }}>
+      <Box display="inline-flex" alignItems="center" gap={1}>
+        <Icon icon={Star} size={3} color="var(--warning-amber)" />
+        <Text color="text-amber-300" className="tabular-nums">
+          {rating !== null ? rating : '—'}
+        </Text>
+      </Box>
+
+      {rank !== null && (
+        <Box display="inline-flex" alignItems="center" gap={1}>
+          <Icon icon={Trophy} size={3} color="var(--primary-blue)" />
+          <Text color="text-primary-blue" className="tabular-nums">#{rank}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}