77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
import { AlertCircle, CheckCircle, XCircle } from 'lucide-react';
|
|
|
|
interface SponsorshipRequest {
|
|
id: string;
|
|
sponsorName: string;
|
|
status: 'pending' | 'approved' | 'rejected';
|
|
statusLabel: string;
|
|
formattedRequestedAt: string;
|
|
slotName: string;
|
|
}
|
|
|
|
interface SponsorshipRequestCardProps {
|
|
request: SponsorshipRequest;
|
|
}
|
|
|
|
export function SponsorshipRequestCard({ request }: SponsorshipRequestCardProps) {
|
|
const statusVariant = {
|
|
pending: 'warning' as const,
|
|
approved: 'success' as const,
|
|
rejected: 'danger' as const,
|
|
}[request.status];
|
|
|
|
const statusIcon = {
|
|
pending: AlertCircle,
|
|
approved: CheckCircle,
|
|
rejected: XCircle,
|
|
}[request.status];
|
|
|
|
const statusColor = {
|
|
pending: '#f59e0b',
|
|
approved: '#10b981',
|
|
rejected: '#ef4444',
|
|
}[request.status];
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
border
|
|
padding={4}
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
style={{
|
|
backgroundColor: `${statusColor}0D`,
|
|
borderColor: statusColor
|
|
}}
|
|
>
|
|
<Stack direction="row" align="start" justify="between">
|
|
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
|
<Stack style={{ flex: 1, minWidth: 0 }}>
|
|
<Stack direction="row" align="center" gap={3} mb={2}>
|
|
<Icon icon={statusIcon} size={5} color={statusColor} />
|
|
<Text weight="semibold" color="text-white">{request.sponsorName}</Text>
|
|
<Badge variant={statusVariant}>
|
|
{request.statusLabel}
|
|
</Badge>
|
|
</Stack>
|
|
|
|
<Text size="sm" color="text-gray-300" block mb={2}>
|
|
Requested: {request.slotName}
|
|
</Text>
|
|
|
|
<Text size="xs" color="text-gray-400" block>
|
|
{request.formattedRequestedAt}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|