website refactor

apps/website/ui/RankingListItem.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Stack } from './Stack';
+
+interface RankingListItemProps {
+  name: string;
+  type: 'overall' | 'league';
+  rank: number;
+  totalDrivers: number;
+  percentile: number;
+  rating: number;
+}
+
+export function RankingListItem({
+  name,
+  type,
+  rank,
+  totalDrivers,
+  percentile,
+  rating,
+}: RankingListItemProps) {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="between"
+      py={2}
+      px={3}
+      rounded="lg"
+      bg="bg-deep-graphite/60"
+    >
+      <Stack gap={0}>
+        <Text size="sm" weight="medium" color="text-white">
+          {name}
+        </Text>
+        <Text size="xs" color="text-gray-400">
+          {type === 'overall' ? 'Overall' : 'League'} ranking
+        </Text>
+      </Stack>
+
+      <Box display="flex" alignItems="center" gap={6} textAlign="right">
+        <Box>
+          <Text color="text-primary-blue" size="base" weight="semibold" block>
+            #{rank}
+          </Text>
+          <Text color="text-gray-500" size="xs" block>Position</Text>
+        </Box>
+        <Box>
+          <Text color="text-white" size="sm" weight="semibold" block>
+            {totalDrivers}
+          </Text>
+          <Text color="text-gray-500" size="xs" block>Drivers</Text>
+        </Box>
+        <Box>
+          <Text color="text-green-400" size="sm" weight="semibold" block>
+            {percentile.toFixed(1)}%
+          </Text>
+          <Text color="text-gray-500" size="xs" block>Percentile</Text>
+        </Box>
+        <Box>
+          <Text color="text-warning-amber" size="sm" weight="semibold" block>
+            {rating}
+          </Text>
+          <Text color="text-gray-500" size="xs" block>Rating</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}