81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Container from '@/components/ui/Container';
|
|
import Heading from '@/components/ui/Heading';
|
|
|
|
export interface SponsorshipRequestsTemplateProps {
|
|
viewData: SponsorshipRequestsViewData;
|
|
onAccept: (requestId: string) => Promise<void>;
|
|
onReject: (requestId: string, reason?: string) => Promise<void>;
|
|
}
|
|
|
|
export function SponsorshipRequestsTemplate({
|
|
viewData,
|
|
onAccept,
|
|
onReject,
|
|
}: SponsorshipRequestsTemplateProps) {
|
|
return (
|
|
<Container size="md" className="space-y-8">
|
|
<div>
|
|
<Heading level={1} className="text-white mb-2">
|
|
Sponsorship Requests
|
|
</Heading>
|
|
<p className="text-gray-400 text-sm">
|
|
Manage pending sponsorship requests for your profile.
|
|
</p>
|
|
</div>
|
|
|
|
{viewData.sections.map((section) => (
|
|
<Card key={`${section.entityType}-${section.entityId}`}>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<Heading level={2} className="text-white">
|
|
{section.entityName}
|
|
</Heading>
|
|
<span className="text-xs text-gray-400">
|
|
{section.requests.length} {section.requests.length === 1 ? 'request' : 'requests'}
|
|
</span>
|
|
</div>
|
|
|
|
{section.requests.length === 0 ? (
|
|
<p className="text-sm text-gray-400">No pending requests.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{section.requests.map((request) => (
|
|
<div
|
|
key={request.id}
|
|
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
|
>
|
|
<div className="flex-1">
|
|
<p className="text-white font-medium">{request.sponsorName}</p>
|
|
{request.message && (
|
|
<p className="text-xs text-gray-400 mt-1">{request.message}</p>
|
|
)}
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
{new Date(request.createdAtIso).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => onAccept(request.id)}
|
|
>
|
|
Accept
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => onReject(request.id)}
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
))}
|
|
</Container>
|
|
);
|
|
}
|