76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { IconButton } from '@/ui/IconButton';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Group } from '@/ui/Group';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
import { Check, Clock, X, UserPlus } from 'lucide-react';
|
|
import React from '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 (
|
|
<EmptyState
|
|
icon={UserPlus}
|
|
title="No pending join requests"
|
|
variant="minimal"
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Panel title={`Pending Requests (${requests.length})`}>
|
|
<Stack gap={3}>
|
|
{requests.map((request) => (
|
|
<ListItem key={request.id}>
|
|
<ListItemInfo
|
|
title={request.driverName}
|
|
description={request.message}
|
|
meta={
|
|
<Group gap={1.5}>
|
|
<Icon icon={Clock} size={3} intent="low" />
|
|
<Text size="xs" variant="low" font="mono">{request.requestedAt}</Text>
|
|
</Group>
|
|
}
|
|
/>
|
|
<ListItemActions>
|
|
<IconButton
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => onDecline(request.id)}
|
|
icon={X}
|
|
intent="critical"
|
|
title="Decline"
|
|
/>
|
|
<IconButton
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={() => onAccept(request.id)}
|
|
icon={Check}
|
|
title="Accept"
|
|
/>
|
|
</ListItemActions>
|
|
</ListItem>
|
|
))}
|
|
</Stack>
|
|
</Panel>
|
|
);
|
|
}
|