website refactor

apps/website/ui/RaceRowCell.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+
+export interface RaceRowCellProps {
+  children: ReactNode;
+  label?: string;
+  width?: string | number;
+  align?: 'left' | 'center' | 'right';
+  hideOnMobile?: boolean;
+}
+
+export const RaceRowCell = ({ 
+  children, 
+  label, 
+  width, 
+  align = 'left',
+  hideOnMobile = false
+}: RaceRowCellProps) => {
+  const alignmentClasses = {
+    left: 'items-start text-left',
+    center: 'items-center text-center',
+    right: 'items-end text-right'
+  }[align];
+
+  return (
+    <Box 
+      display={hideOnMobile ? { base: 'none', md: 'flex' } : 'flex'}
+      flexDirection="col"
+      width={width}
+      flexShrink={width ? 0 : 1}
+      minWidth="0"
+      className={alignmentClasses}
+    >
+      {label && (
+        <Text 
+          size="xs" 
+          variant="low" 
+          uppercase 
+          weight="bold" 
+          letterSpacing="widest"
+          marginBottom={0.5}
+        >
+          {label}
+        </Text>
+      )}
+      <Box display="flex" alignItems="center" gap={2} minWidth="0" justifyContent={align === 'right' ? 'end' : (align === 'center' ? 'center' : 'start')}>
+        {children}
+      </Box>
+    </Box>
+  );
+};