75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import { Button } from '@/ui/Button';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface JoinRequestItemProps {
|
|
driverId: string;
|
|
formattedRequestedAt: string;
|
|
onApprove: () => void;
|
|
onReject: () => void;
|
|
isApproving?: boolean;
|
|
isRejecting?: boolean;
|
|
}
|
|
|
|
export function JoinRequestItem({
|
|
driverId,
|
|
formattedRequestedAt,
|
|
onApprove,
|
|
onReject,
|
|
isApproving,
|
|
isRejecting,
|
|
}: JoinRequestItemProps) {
|
|
return (
|
|
<Stack
|
|
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}>
|
|
<Stack
|
|
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)}
|
|
</Stack>
|
|
<Stack flexGrow={1}>
|
|
<Text color="text-white" weight="medium" block>{driverId}</Text>
|
|
<Text size="sm" color="text-gray-400" block>
|
|
Requested {formattedRequestedAt}
|
|
</Text>
|
|
</Stack>
|
|
</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>
|
|
</Stack>
|
|
);
|
|
}
|