website refactor

apps/website/components/drivers/RatingComponent.tsx

@@ -0,0 +1,52 @@
+
+
+import { Box } from '@/ui/Box';
+import { ProgressBar } from '@/ui/ProgressBar';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface RatingComponentProps {
+  label: string;
+  value: number;
+  maxValue: number;
+  color: string;
+  suffix?: string;
+  description: string;
+  breakdown: { label: string; percentage: number }[];
+}
+
+export function RatingComponent({
+  label,
+  value,
+  maxValue,
+  color,
+  suffix = '',
+  description,
+  breakdown,
+}: RatingComponentProps) {
+  const percentage = (value / maxValue) * 100;
+
+  return (
+    <Box>
+      <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
+        <Text weight="medium" color="text-white">{label}</Text>
+        <Text size="2xl" weight="bold" color={color}>
+          {value}{suffix}
+        </Text>
+      </Box>
+      
+      <ProgressBar value={percentage} max={100} color={color} mb={3} />
+
+      <Text size="xs" color="text-gray-400" block mb={3}>{description}</Text>
+
+      <Stack gap={1}>
+        {breakdown.map((item, index) => (
+          <Box key={index} display="flex" alignItems="center" justifyContent="between">
+            <Text size="xs" color="text-gray-500">{item.label}</Text>
+            <Text size="xs" color="text-gray-400">{item.percentage}%</Text>
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}