wip

apps/website/components/races/UpcomingRacesSidebar.tsx

@@ -1,5 +1,9 @@
-import Card from '@/ui/Card';
-import Button from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
 
 type UpcomingRace = {
   id: string;
@@ -12,44 +16,46 @@ interface UpcomingRacesSidebarProps {
   races: UpcomingRace[];
 }
 
-export default function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
+export function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
   if (!races.length) {
     return null;
   }
 
   return (
     <Card className="bg-iron-gray/80">
-      <div className="flex items-baseline justify-between mb-3">
-        <h3 className="text-sm font-semibold text-white">Upcoming races</h3>
+      <Stack direction="row" align="baseline" justify="between" mb={3}>
+        <Heading level={3}>Upcoming races</Heading>
         <Button
           as="a"
           href="/races"
           variant="secondary"
-          className="text-[11px] px-3 py-1.5"
+          size="sm"
         >
           View all
         </Button>
-      </div>
-      <ul className="space-y-3">
+      </Stack>
+      <Stack gap={3}>
         {races.slice(0, 4).map((race) => {
           const scheduledAt = typeof race.scheduledAt === 'string' ? new Date(race.scheduledAt) : race.scheduledAt;
 
           return (
-          <li key={race.id} className="flex items-start justify-between gap-3 text-xs">
-            <div className="flex-1 min-w-0">
-              <p className="text-white truncate">{race.track}</p>
-              <p className="text-gray-400 truncate">{race.car}</p>
-            </div>
-            <div className="text-right text-gray-500 whitespace-nowrap">
-              {scheduledAt.toLocaleDateString(undefined, {
-                month: 'short',
-                day: 'numeric'
-              })}
-            </div>
-          </li>
+            <Box key={race.id} display="flex" justify="between" gap={3}>
+              <Box flex={1} className="min-w-0">
+                <Text size="xs" color="text-white" block className="truncate">{race.track}</Text>
+                <Text size="xs" color="text-gray-400" block className="truncate">{race.car}</Text>
+              </Box>
+              <Box textAlign="right">
+                <Text size="xs" color="text-gray-500" className="whitespace-nowrap">
+                  {scheduledAt.toLocaleDateString(undefined, {
+                    month: 'short',
+                    day: 'numeric'
+                  })}
+                </Text>
+              </Box>
+            </Box>
           );
         })}
-      </ul>
+      </Stack>
     </Card>
   );
 }