website refactor

apps/website/ui/JoinRequestItem.tsx

@@ -0,0 +1,76 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Stack } from './Stack';
+import { Button } from './Button';
+
+interface JoinRequestItemProps {
+  driverId: string;
+  requestedAt: string | Date;
+  onApprove: () => void;
+  onReject: () => void;
+  isApproving?: boolean;
+  isRejecting?: boolean;
+}
+
+export function JoinRequestItem({
+  driverId,
+  requestedAt,
+  onApprove,
+  onReject,
+  isApproving,
+  isRejecting,
+}: JoinRequestItemProps) {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="between"
+      p={4}
+      rounded="lg"
+      bg="bg-deep-graphite"
+      border={true}
+      borderColor="border-charcoal-outline"
+    >
+      <Stack direction="row" align="center" gap={4} flexGrow={1}>
+        <Box 
+          width="12" 
+          height="12" 
+          rounded="full" 
+          bg="bg-primary-blue/20" 
+          display="flex" 
+          center 
+          color="text-white"
+          weight="bold"
+          style={{ fontSize: '1.125rem' }}
+        >
+          {driverId.charAt(0)}
+        </Box>
+        <Box flexGrow={1}>
+          <Text color="text-white" weight="medium" block>{driverId}</Text>
+          <Text size="sm" color="text-gray-400" block>
+            Requested {new Date(requestedAt).toLocaleDateString()}
+          </Text>
+        </Box>
+      </Stack>
+      <Stack direction="row" gap={2}>
+        <Button
+          variant="primary"
+          onClick={onApprove}
+          disabled={isApproving}
+          size="sm"
+        >
+          {isApproving ? 'Approving...' : 'Approve'}
+        </Button>
+        <Button
+          variant="danger"
+          onClick={onReject}
+          disabled={isRejecting}
+          size="sm"
+        >
+          {isRejecting ? 'Rejecting...' : 'Reject'}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}