87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Check, Clock, X } from 'lucide-react';
|
|
|
|
interface JoinRequestsPanelProps {
|
|
requests: Array<{
|
|
id: string;
|
|
driverName: string;
|
|
driverAvatar?: string;
|
|
message?: string;
|
|
requestedAt: string;
|
|
}>;
|
|
onAccept: (id: string) => void;
|
|
onDecline: (id: string) => void;
|
|
}
|
|
|
|
export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequestsPanelProps) {
|
|
if (requests.length === 0) {
|
|
return (
|
|
<Stack p={8} border borderDash borderColor="border-steel-grey" bg="surface-charcoal/20" textAlign="center">
|
|
<Text color="text-gray-500" size="sm">No pending join requests</Text>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
|
|
<Stack p={4} borderBottom borderColor="border-steel-grey" bg="base-graphite/50">
|
|
<Heading level={4} weight="bold" className="uppercase tracking-widest text-gray-400 text-[10px]">
|
|
Pending Requests ({requests.length})
|
|
</Heading>
|
|
</Stack>
|
|
<Stack gap={0} className="divide-y divide-border-steel-grey/30">
|
|
{requests.map((request) => (
|
|
<Stack key={request.id} p={4} className="hover:bg-white/[0.02] transition-colors">
|
|
<Stack direction="row" align="start" justify="between" gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Stack w="10" h="10" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center>
|
|
<Text size="xs" weight="bold" color="text-primary-blue">
|
|
{request.driverName.substring(0, 2).toUpperCase()}
|
|
</Text>
|
|
</Stack>
|
|
<Stack>
|
|
<Text weight="bold" size="sm" color="text-white" block>{request.driverName}</Text>
|
|
<Stack direction="row" align="center" gap={1.5} mt={0.5}>
|
|
<Icon icon={Clock} size={3} color="text-gray-500" />
|
|
<Text size="xs" color="text-gray-500" font="mono">{request.requestedAt}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => onDecline(request.id)}
|
|
className="h-8 w-8 p-0 flex items-center justify-center border-red-500/30 hover:bg-red-500/10"
|
|
>
|
|
<Icon icon={X} size={4} color="text-red-400" />
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={() => onAccept(request.id)}
|
|
className="h-8 w-8 p-0 flex items-center justify-center"
|
|
>
|
|
<Icon icon={Check} size={4} />
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
{request.message && (
|
|
<Stack mt={3} p={3} bg="base-graphite/30" borderLeft borderPrimary borderColor="primary-blue/40">
|
|
<Text size="xs" color="text-gray-400" italic leading="relaxed">
|
|
“{request.message}”
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|