mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 01:26:30 +01:00
parent 4a2d7d15a5
commit c3b308e960
102 changed files with 2532 additions and 4744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
apps/website/templates/LeagueSponsorshipsTemplate.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import React from 'react';
import React, { useState } from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
@@ -9,107 +9,145 @@ 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 { Building, Clock, Palette } from 'lucide-react';
import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
import LeagueDecalPlacementEditor from '@/components/leagues/LeagueDecalPlacementEditor';
interface LeagueSponsorshipsTemplateProps {
viewData: LeagueSponsorshipsViewData;
}
export function LeagueSponsorshipsTemplate({ viewData }: LeagueSponsorshipsTemplateProps) {
const [activeTab, setActiveTab] = useState<'overview' | 'editor'>('overview');
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 direction="row" align="center" justify="between">
<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 direction="row" gap={2}>
<button
onClick={() => setActiveTab('overview')}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'overview'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
>
Overview
</button>
<button
onClick={() => setActiveTab('editor')}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'editor'
? 'bg-primary-blue text-white'
: 'bg-iron-gray text-gray-400 hover:text-white'
}`}
>
Livery Editor
</button>
</Stack>
</Stack>
{activeTab === 'overview' ? (
<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>
</Stack>
) : (
<Card>
<Stack gap={6}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(168, 85, 247, 0.1)' }}>
<Icon icon={Palette} size={5} color="#a855f7" />
</Surface>
<Box>
<Heading level={3}>League Livery Editor</Heading>
<Text size="sm" color="text-gray-400">Configure where sponsor decals appear on league cars</Text>
</Box>
</Stack>
<LeagueDecalPlacementEditor
leagueId={viewData.leagueId}
seasonId="current"
carId="gt3-r"
carName="Porsche 911 GT3 R (992)"
onSave={(placements) => {
console.log('Placements saved:', placements);
}}
/>
</Stack>
</Card>
)}
</Stack>
);
}