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/LeagueMembershipFeesSection.tsx
View File

@@ -3,9 +3,8 @@
import { useState } from 'react';
import { Button } from '@/ui/Button';
import { Input } from '@/ui/Input';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { DollarSign, Calendar, User, TrendingUp } from 'lucide-react';
@@ -76,13 +75,13 @@ export function LeagueMembershipFeesSection({
return (
<Stack gap={6}>
{/* Header */}
<Box display="flex" alignItems="center" justifyContent="between">
<Box>
<Stack display="flex" alignItems="center" justifyContent="between">
<Stack>
<Heading level={3} fontSize="lg" weight="semibold" color="text-white">Membership Fees</Heading>
<Text size="sm" color="text-gray-400" mt={1} block>
Charge drivers for league participation
</Text>
</Box>
</Stack>
{!feeConfig.enabled && !readOnly && (
<Button
variant="primary"
@@ -91,18 +90,18 @@ export function LeagueMembershipFeesSection({
Enable Fees
</Button>
)}
</Box>
</Stack>
{!feeConfig.enabled ? (
<Box textAlign="center" py={12} rounded="lg" border borderColor="border-charcoal-outline" bg="bg-iron-gray/30">
<Box w="16" h="16" mx="auto" mb={4} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
<Stack textAlign="center" py={12} rounded="lg" border borderColor="border-charcoal-outline" bg="bg-iron-gray/30">
<Stack w="16" h="16" mx="auto" mb={4} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
<Icon icon={DollarSign} size={8} color="text-gray-500" />
</Box>
</Stack>
<Heading level={4} fontSize="lg" weight="medium" color="text-white" mb={2}>No Membership Fees</Heading>
<Text size="sm" color="text-gray-400" maxWidth="md" mx="auto" block>
This league is free to join. Enable membership fees to charge drivers for participation.
</Text>
</Box>
</Stack>
) : (
<>
{/* Fee Type Selection */}
@@ -110,13 +109,13 @@ export function LeagueMembershipFeesSection({
<Text as="label" size="sm" weight="medium" color="text-gray-300" block>
Fee Type
</Text>
<Box display="grid" gridCols={3} gap={3}>
<Stack display="grid" gridCols={3} gap={3}>
{(['season', 'monthly', 'per_race'] as FeeType[]).map((type) => {
const FeeIcon = type === 'season' ? Calendar : type === 'monthly' ? TrendingUp : User;
const isSelected = feeConfig.type === type;
return (
<Box
<Stack
key={type}
as="button"
type="button"
@@ -137,10 +136,10 @@ export function LeagueMembershipFeesSection({
<Text size="xs" color="text-gray-500" block>
{typeDescriptions[type]}
</Text>
</Box>
</Stack>
);
})}
</Box>
</Stack>
</Stack>
{/* Amount Configuration */}
@@ -150,8 +149,8 @@ export function LeagueMembershipFeesSection({
</Text>
{editing ? (
<Box display="flex" alignItems="center" gap={3}>
<Box flexGrow={1}>
<Stack display="flex" alignItems="center" gap={3}>
<Stack flexGrow={1}>
<Input
type="number"
value={tempAmount}
@@ -160,7 +159,7 @@ export function LeagueMembershipFeesSection({
min="0"
step="0.01"
/>
</Box>
</Stack>
<Button
variant="primary"
onClick={handleSave}
@@ -175,17 +174,17 @@ export function LeagueMembershipFeesSection({
>
Cancel
</Button>
</Box>
</Stack>
) : (
<Box display="flex" alignItems="center" justifyContent="between" p={4} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
<Box>
<Stack display="flex" alignItems="center" justifyContent="between" p={4} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
<Stack>
<Text size="2xl" weight="bold" color="text-white" block>
${feeConfig.amount.toFixed(2)}
</Text>
<Text size="xs" color="text-gray-500" mt={1} block>
{typeLabels[feeConfig.type]}
</Text>
</Box>
</Stack>
{!readOnly && (
<Button
variant="secondary"
@@ -195,49 +194,49 @@ export function LeagueMembershipFeesSection({
Edit Amount
</Button>
)}
</Box>
</Stack>
)}
</Stack>
{/* Revenue Breakdown */}
{feeConfig.amount > 0 && (
<Box display="grid" gridCols={2} gap={4}>
<Box rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" p={4}>
<Stack display="grid" gridCols={2} gap={4}>
<Stack rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" p={4}>
<Text size="xs" color="text-gray-400" block mb={1}>Platform Fee (10%)</Text>
<Text size="lg" weight="bold" color="text-warning-amber" block>
-${platformFee.toFixed(2)}
</Text>
</Box>
<Box rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" p={4}>
</Stack>
<Stack rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" p={4}>
<Text size="xs" color="text-gray-400" block mb={1}>Net per Driver</Text>
<Text size="lg" weight="bold" color="text-performance-green" block>
${netAmount.toFixed(2)}
</Text>
</Box>
</Box>
</Stack>
</Stack>
)}
{/* Disable Fees */}
{!readOnly && (
<Box pt={4} borderTop borderColor="border-charcoal-outline">
<Stack pt={4} borderTop borderColor="border-charcoal-outline">
<Button
variant="danger"
onClick={() => setFeeConfig({ type: 'season', amount: 0, enabled: false })}
>
Disable Membership Fees
</Button>
</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> Membership fee collection is demonstration-only.
In production, fees are collected via payment gateway and deposited to league wallet (minus platform fee).
</Text>
</Box>
</Stack>
</Stack>
);
}