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

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/website/components/leagues/LeagueSponsorshipsSection.tsx
View File

@@ -5,10 +5,9 @@ import { useState } from 'react';
import { PendingSponsorshipRequests } from '../sponsors/PendingSponsorshipRequests';
import { Button } from '@/ui/Button';
import { Input } from '@/ui/Input';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Badge } from '@/ui/Badge';
import { StatBox } from '@/ui/StatBox';
@@ -120,8 +119,8 @@ export function LeagueSponsorshipsSection({
return (
<Stack gap={6}>
{/* Header */}
<Box display="flex" alignItems="center" justifyContent="between">
<Box>
<Stack display="flex" alignItems="center" justifyContent="between">
<Stack>
<Heading level={3}>Sponsorships</Heading>
<Text size="sm" color="text-gray-400" mt={1} block>
Define pricing for sponsor slots in this league. Sponsors pay per season.
@@ -129,20 +128,20 @@ export function LeagueSponsorshipsSection({
<Text size="xs" color="text-gray-500" mt={1} block>
These sponsors are attached to seasons in this league, so you can change partners from season to season.
</Text>
</Box>
</Stack>
{!readOnly && (
<Box display="flex" alignItems="center" gap={2} px={3} py={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/30">
<Stack display="flex" alignItems="center" gap={2} px={3} py={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/30">
<Icon icon={DollarSign} size={4} color="var(--primary-blue)" />
<Text size="xs" weight="medium" color="text-primary-blue">
{availableSlots} slot{availableSlots !== 1 ? 's' : ''} available
</Text>
</Box>
</Stack>
)}
</Box>
</Stack>
{/* Revenue Summary */}
{totalRevenue > 0 && (
<Box display="grid" gridCols={3} gap={4}>
<Stack display="grid" gridCols={3} gap={4}>
<StatBox
icon={DollarSign}
label="Total Revenue"
@@ -161,7 +160,7 @@ export function LeagueSponsorshipsSection({
value={`$${netRevenue.toFixed(2)}`}
color="var(--performance-green)"
/>
</Box>
</Stack>
)}
{/* Sponsorship Slots */}
@@ -171,7 +170,7 @@ export function LeagueSponsorshipsSection({
const IconComp = slot.tier === 'main' ? Star : Award;
return (
<Box
<Stack
key={index}
rounded="lg"
border
@@ -179,9 +178,9 @@ export function LeagueSponsorshipsSection({
bg="bg-deep-graphite/70"
p={4}
>
<Box display="flex" alignItems="center" justifyContent="between" gap={4}>
<Box display="flex" alignItems="center" gap={3} flexGrow={1}>
<Box
<Stack display="flex" alignItems="center" justifyContent="between" gap={4}>
<Stack display="flex" alignItems="center" gap={3} flexGrow={1}>
<Stack
display="flex"
h="10"
w="10"
@@ -191,10 +190,10 @@ export function LeagueSponsorshipsSection({
bg={slot.tier === 'main' ? 'bg-primary-blue/10' : 'bg-gray-500/10'}
>
<Icon icon={IconComp} size={5} color={slot.tier === 'main' ? 'var(--primary-blue)' : 'var(--gray-400)'} />
</Box>
</Stack>
<Box flexGrow={1}>
<Box display="flex" alignItems="center" gap={2}>
<Stack flexGrow={1}>
<Stack display="flex" alignItems="center" gap={2}>
<Heading level={4}>
{slot.tier === 'main' ? 'Main Sponsor' : 'Secondary Sponsor'}
</Heading>
@@ -203,18 +202,18 @@ export function LeagueSponsorshipsSection({
Occupied
</Badge>
)}
</Box>
</Stack>
<Text size="xs" color="text-gray-500" mt={0.5} block>
{slot.tier === 'main'
? 'Big livery slot • League page logo • Name in league title'
: 'Small livery slot • League page logo'}
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box display="flex" alignItems="center" gap={3}>
<Stack display="flex" alignItems="center" gap={3}>
{isEditing ? (
<Box display="flex" alignItems="center" gap={2}>
<Stack display="flex" alignItems="center" gap={2}>
<Input
type="number"
value={tempPrice}
@@ -239,15 +238,15 @@ export function LeagueSponsorshipsSection({
>
<Icon icon={X} size={4} />
</Button>
</Box>
</Stack>
) : (
<>
<Box textAlign="right">
<Stack textAlign="right">
<Text size="lg" weight="bold" color="text-white" block>
${slot.price.toFixed(2)}
</Text>
<Text size="xs" color="text-gray-500" block>per season</Text>
</Box>
</Stack>
{!readOnly && !slot.isOccupied && (
<Button
variant="secondary"
@@ -259,16 +258,16 @@ export function LeagueSponsorshipsSection({
)}
</>
)}
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
);
})}
</Stack>
{/* Pending Sponsorship Requests */}
{!readOnly && (pendingRequests.length > 0 || requestsLoading) && (
<Box mt={8} pt={6} borderTop borderColor="border-charcoal-outline">
<Stack mt={8} pt={6} borderTop borderColor="border-charcoal-outline">
<PendingSponsorshipRequests
entityType="season"
entityId={seasonId || ''}
@@ -278,16 +277,16 @@ export function LeagueSponsorshipsSection({
onReject={handleRejectRequest}
isLoading={requestsLoading}
/>
</Box>
</Stack>
)}
{/* Alpha Notice */}
<Box rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
<Stack rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
<Text size="xs" color="text-gray-400" block>
<Text weight="bold" color="text-warning-amber">Alpha Note:</Text> Sponsorship management is demonstration-only.
In production, sponsors can browse leagues, select slots, and complete payment integration.
</Text>
</Box>
</Stack>
</Stack>
);
}