website refactor

apps/website/components/drivers/SafetyRatingBadge.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { Shield } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface SafetyRatingBadgeProps {
+  rating: number;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function SafetyRatingBadge({ rating, size = 'md' }: SafetyRatingBadgeProps) {
+  const getColor = (r: number) => {
+    if (r >= 90) return 'text-performance-green';
+    if (r >= 70) return 'text-warning-amber';
+    return 'text-red-500';
+  };
+
+  const getBgColor = (r: number) => {
+    if (r >= 90) return 'bg-performance-green/10';
+    if (r >= 70) return 'bg-warning-amber/10';
+    return 'bg-red-500/10';
+  };
+
+  const getBorderColor = (r: number) => {
+    if (r >= 90) return 'border-performance-green/20';
+    if (r >= 70) return 'border-warning-amber/20';
+    return 'border-red-500/20';
+  };
+
+  const sizeProps = {
+    sm: { px: 2, py: 0.5, gap: 1 },
+    md: { px: 3, py: 1, gap: 1.5 },
+    lg: { px: 4, py: 2, gap: 2 },
+  };
+
+  const iconSizes = {
+    sm: 12,
+    md: 14,
+    lg: 16,
+  };
+
+  const iconColors = {
+    'text-performance-green': '#22C55E',
+    'text-warning-amber': '#FFBE4D',
+    'text-red-500': '#EF4444',
+  };
+
+  const colorClass = getColor(rating);
+
+  return (
+    <Box 
+      display="inline-flex" 
+      alignItems="center" 
+      rounded="full" 
+      border 
+      bg={getBgColor(rating)}
+      borderColor={getBorderColor(rating)}
+      {...sizeProps[size]}
+    >
+      <Shield size={iconSizes[size]} color={iconColors[colorClass as keyof typeof iconColors]} />
+      <Text 
+        size={size === 'lg' ? 'sm' : 'xs'} 
+        weight="bold" 
+        font="mono" 
+        color={colorClass}
+      >
+        SR {rating.toFixed(0)}
+      </Text>
+    </Box>
+  );
+}