website refactor

apps/website/components/races/SidebarRaceItem.tsx

@@ -1,5 +1,8 @@
-import { SidebarItem } from '@/ui/SidebarItem';
+'use client';
+
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import React from 'react';
 
 interface SidebarRaceItemProps {
@@ -15,18 +18,38 @@ export function SidebarRaceItem({ race, onClick }: SidebarRaceItemProps) {
   const scheduledAtDate = new Date(race.scheduledAt);
 
   return (
-    <SidebarItem
+    <Box
       onClick={onClick}
-      icon={
-        <Text size="sm" weight="bold" variant="primary">
+      cursor="pointer"
+      p={3}
+      rounded="md"
+      bg="transparent"
+      hoverBg="white/[0.03]"
+      transition
+      display="flex"
+      alignItems="center"
+      gap={3}
+    >
+      <Stack 
+        width="10" 
+        height="10" 
+        align="center" 
+        justify="center" 
+        bg="var(--ui-color-bg-base)" 
+        border 
+        borderColor="var(--ui-color-border-default)"
+        rounded="md"
+      >
+        <Text size="xs" weight="bold" variant="primary" mono>
           {scheduledAtDate.getDate()}
         </Text>
-      }
-    >
-      <Text size="sm" weight="medium" variant="high" block truncate>{race.track}</Text>
-      <Text size="xs" variant="low" block>
-        {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-      </Text>
-    </SidebarItem>
+      </Stack>
+      <Stack gap={0.5} flexGrow={1}>
+        <Text size="sm" weight="bold" variant="high" block truncate>{race.track}</Text>
+        <Text size="xs" variant="telemetry" mono block>
+          {scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+        </Text>
+      </Stack>
+    </Box>
   );
 }