website refactor

apps/website/components/races/SidebarRaceItem.tsx

@@ -1,7 +1,6 @@
-import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
+import { SidebarItem } from '@/ui/SidebarItem';
 import { Text } from '@/ui/Text';
-import { ChevronRight } from 'lucide-react';
+import React from 'react';
 
 interface SidebarRaceItemProps {
   race: {
@@ -10,33 +9,24 @@ interface SidebarRaceItemProps {
     scheduledAt: string;
   };
   onClick?: () => void;
-  className?: string;
 }
 
-export function SidebarRaceItem({ race, onClick, className }: SidebarRaceItemProps) {
+export function SidebarRaceItem({ race, onClick }: SidebarRaceItemProps) {
   const scheduledAtDate = new Date(race.scheduledAt);
 
   return (
-    <Box
+    <SidebarItem
       onClick={onClick}
-      display="flex"
-      alignItems="center"
-      gap={3}
-      p={2}
-      rounded="lg"
-      cursor="pointer"
-      className={`hover:bg-deep-graphite transition-colors ${className || ''}`}
-    >
-      <Box flexShrink={0} width="10" height="10" bg="bg-primary-blue/10" rounded="lg" display="flex" center>
-        <Text size="sm" weight="bold" color="text-primary-blue">
+      icon={
+        <Text size="sm" weight="bold" variant="primary">
           {scheduledAtDate.getDate()}
         </Text>
-      </Box>
-      <Box flexGrow={1} minWidth="0">
-        <Text size="sm" weight="medium" color="text-white" block truncate>{race.track}</Text>
-        <Text size="xs" color="text-gray-500" block>{scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</Text>
-      </Box>
-      <Icon icon={ChevronRight} size={4} color="text-gray-500" />
-    </Box>
+      }
+    >
+      <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>
   );
 }