116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Building, Clock } from 'lucide-react';
|
|
import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
|
|
import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
|
|
import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
|
|
|
|
interface LeagueSponsorshipsTemplateProps {
|
|
viewData: LeagueSponsorshipsViewData;
|
|
}
|
|
|
|
export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
|
|
return (
|
|
<Stack gap={6}>
|
|
<Box>
|
|
<Heading level={2}>Sponsorships</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={1}>
|
|
Manage sponsorship slots and review requests
|
|
</Text>
|
|
</Box>
|
|
|
|
<Stack gap={6}>
|
|
{/* Sponsorship Slots */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
|
|
<Icon icon={Building} size={5} color="#3b82f6" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={3}>Sponsorship Slots</Heading>
|
|
<Text size="sm" color="text-gray-400">Available sponsorship opportunities</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{viewData.sponsorshipSlots.length === 0 ? (
|
|
<Stack align="center" py={8} gap={4}>
|
|
<Icon icon={Building} size={12} color="#525252" />
|
|
<Text color="text-gray-400">No sponsorship slots available</Text>
|
|
</Stack>
|
|
) : (
|
|
<Grid cols={3} gap={4}>
|
|
{viewData.sponsorshipSlots.map((slot) => (
|
|
<SponsorshipSlotCard key={slot.id} slot={slot} />
|
|
))}
|
|
</Grid>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Sponsorship Requests */}
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)' }}>
|
|
<Icon icon={Clock} size={5} color="#f59e0b" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={3}>Sponsorship Requests</Heading>
|
|
<Text size="sm" color="text-gray-400">Pending and processed sponsorship applications</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{viewData.sponsorshipRequests.length === 0 ? (
|
|
<Stack align="center" py={8} gap={4}>
|
|
<Icon icon={Clock} size={12} color="#525252" />
|
|
<Text color="text-gray-400">No sponsorship requests</Text>
|
|
</Stack>
|
|
) : (
|
|
<Stack gap={3}>
|
|
{viewData.sponsorshipRequests.map((request) => {
|
|
const slot = viewData.sponsorshipSlots.find(s => s.id === request.slotId);
|
|
return (
|
|
<SponsorshipRequestCard
|
|
key={request.id}
|
|
request={{
|
|
...request,
|
|
status: request.status as any,
|
|
slotName: slot?.name || 'Unknown slot'
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
|
|
{/* Note about management */}
|
|
<Card>
|
|
<Stack align="center" py={8} gap={4}>
|
|
<Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
|
|
<Icon icon={Building} size={8} color="#3b82f6" />
|
|
</Surface>
|
|
<Box style={{ textAlign: 'center' }}>
|
|
<Heading level={3}>Sponsorship Management</Heading>
|
|
<Text size="sm" color="text-gray-400" block mt={2}>
|
|
Interactive management features for approving requests and managing slots will be implemented in future updates.
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|