website refactor

apps/website/components/races/RaceDetailCard.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { Flag } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Grid } from '@/ui/Grid';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+
+interface RaceDetailCardProps {
+  track: string;
+  car: string;
+  sessionType: string;
+  statusLabel: string;
+  statusColor: string;
+}
+
+export function RaceDetailCard({ track, car, sessionType, statusLabel, statusColor }: RaceDetailCardProps) {
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Heading level={2} icon={<Icon icon={Flag} size={5} color="#3b82f6" />}>Race Details</Heading>
+        <Grid cols={2} gap={4}>
+          <DetailItem label="Track" value={track} />
+          <DetailItem label="Car" value={car} />
+          <DetailItem label="Session Type" value={sessionType} capitalize />
+          <DetailItem label="Status" value={statusLabel} color={statusColor} />
+        </Grid>
+      </Stack>
+    </Card>
+  );
+}
+
+function DetailItem({ label, value, capitalize, color }: { label: string, value: string | number, capitalize?: boolean, color?: string }) {
+  return (
+    <Box p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
+      <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block mb={1}>{label}</Text>
+      <Text weight="medium" color="text-white" style={{ textTransform: capitalize ? 'capitalize' : 'none', color: color || 'white' }}>{value}</Text>
+    </Box>
+  );
+}