website refactor

apps/website/components/races/LiveRaceItem.tsx

@@ -1,9 +1,10 @@
+'use client';
 
-
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Panel } from '@/ui/Panel';
 import { ChevronRight, PlayCircle } from 'lucide-react';
 
 interface LiveRaceItemProps {
@@ -14,30 +15,21 @@ interface LiveRaceItemProps {
 
 export function LiveRaceItem({ track, leagueName, onClick }: LiveRaceItemProps) {
   return (
-    <Box
+    <Panel
+      variant="precision"
+      padding="sm"
       onClick={onClick}
-      display="flex"
-      alignItems="center"
-      justifyContent="between"
-      p={4}
-      bg="bg-deep-graphite/80"
-      rounded="lg"
-      border
-      borderColor="border-performance-green/20"
-      cursor="pointer"
-      hoverBorderColor="performance-green/40"
-      transition
     >
-      <Box display="flex" alignItems="center" gap={4}>
-        <Box p={2} bg="bg-performance-green/20" rounded="lg">
-          <Icon icon={PlayCircle} size={5} color="rgb(16, 185, 129)" />
-        </Box>
-        <Box>
-          <Heading level={3}>{track}</Heading>
-          <Text size="sm" color="text-gray-400">{leagueName}</Text>
-        </Box>
-      </Box>
-      <Icon icon={ChevronRight} size={5} color="rgb(156, 163, 175)" />
-    </Box>
+      <Stack direction="row" align="center" justify="between" fullWidth>
+        <Stack direction="row" align="center" gap={4}>
+          <Icon icon={PlayCircle} size={5} intent="success" animate="pulse" />
+          <Stack gap={0.5}>
+            <Heading level={5} weight="bold">{track}</Heading>
+            <Text size="xs" variant="low" uppercase letterSpacing="widest">{leagueName}</Text>
+          </Stack>
+        </Stack>
+        <Icon icon={ChevronRight} size={4} intent="low" />
+      </Stack>
+    </Panel>
   );
 }