wip
This commit is contained in:
@@ -2,8 +2,16 @@
|
||||
|
||||
import React from 'react';
|
||||
import { FileText, Gamepad2, AlertCircle, Check } from 'lucide-react';
|
||||
import Input from '@/ui/Input';
|
||||
import { Input } from '@/ui/Input';
|
||||
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Button } from '@/ui/Button';
|
||||
|
||||
interface LeagueBasicsSectionProps {
|
||||
form: LeagueConfigFormModel;
|
||||
@@ -36,126 +44,135 @@ export function LeagueBasicsSection({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Stack gap={8}>
|
||||
{/* Emotional header for the step */}
|
||||
<div className="text-center pb-2">
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
Every great championship starts with a name
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400 max-w-lg mx-auto">
|
||||
This is where legends begin. Give your league an identity that drivers will remember.
|
||||
</p>
|
||||
</div>
|
||||
<Box textAlign="center" pb={2}>
|
||||
<Box mb={2}>
|
||||
<Heading level={3}>
|
||||
Every great championship starts with a name
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box maxWidth="lg" mx="auto">
|
||||
<Text size="sm" color="text-gray-400">
|
||||
This is where legends begin. Give your league an identity that drivers will remember.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* League name */}
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-300">
|
||||
<FileText className="w-4 h-4 text-primary-blue" />
|
||||
League name *
|
||||
</label>
|
||||
<Stack gap={3}>
|
||||
<Text as="label" size="sm" weight="medium" color="text-gray-300">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={FileText} size={4} color="text-primary-blue" />
|
||||
League name *
|
||||
</Stack>
|
||||
</Text>
|
||||
<Input
|
||||
value={basics.name}
|
||||
onChange={(e) => updateBasics({ name: e.target.value })}
|
||||
placeholder="e.g., GridPilot Sprint Series"
|
||||
error={!!errors?.name}
|
||||
variant={errors?.name ? 'error' : 'default'}
|
||||
errorMessage={errors?.name}
|
||||
disabled={disabled}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs text-gray-500">
|
||||
<Stack gap={2}>
|
||||
<Text size="xs" color="text-gray-500">
|
||||
Make it memorable — this is what drivers will see first
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="text-xs text-gray-500">Try:</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateBasics({ name: 'Sunday Showdown Series' })}
|
||||
className="text-xs px-2 py-0.5 rounded-full bg-primary-blue/10 text-primary-blue hover:bg-primary-blue/20 transition-colors"
|
||||
disabled={disabled}
|
||||
>
|
||||
Sunday Showdown Series
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateBasics({ name: 'Midnight Endurance League' })}
|
||||
className="text-xs px-2 py-0.5 rounded-full bg-primary-blue/10 text-primary-blue hover:bg-primary-blue/20 transition-colors"
|
||||
disabled={disabled}
|
||||
>
|
||||
Midnight Endurance League
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateBasics({ name: 'GT Masters Championship' })}
|
||||
className="text-xs px-2 py-0.5 rounded-full bg-primary-blue/10 text-primary-blue hover:bg-primary-blue/20 transition-colors"
|
||||
disabled={disabled}
|
||||
>
|
||||
GT Masters Championship
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
<Stack direction="row" wrap gap={2}>
|
||||
<Text size="xs" color="text-gray-500">Try:</Text>
|
||||
{[
|
||||
'Sunday Showdown Series',
|
||||
'Midnight Endurance League',
|
||||
'GT Masters Championship'
|
||||
].map(name => (
|
||||
<Button
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={() => updateBasics({ name })}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="h-auto py-0.5 px-2 rounded-full text-xs"
|
||||
disabled={disabled}
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* Description - Now Required */}
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-300">
|
||||
<FileText className="w-4 h-4 text-primary-blue" />
|
||||
Tell your story *
|
||||
</label>
|
||||
<textarea
|
||||
value={basics.description ?? ''}
|
||||
onChange={(e) =>
|
||||
updateBasics({
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
rows={4}
|
||||
disabled={disabled}
|
||||
className={`block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-150 ${
|
||||
errors?.description ? 'ring-warning-amber' : 'ring-charcoal-outline'
|
||||
}`}
|
||||
placeholder="What makes your league special? Tell drivers what to expect..."
|
||||
/>
|
||||
<Stack gap={3}>
|
||||
<Text as="label" size="sm" weight="medium" color="text-gray-300">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={FileText} size={4} color="text-primary-blue" />
|
||||
Tell your story *
|
||||
</Stack>
|
||||
</Text>
|
||||
<Box position="relative">
|
||||
<textarea
|
||||
value={basics.description ?? ''}
|
||||
onChange={(e) =>
|
||||
updateBasics({
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
rows={4}
|
||||
disabled={disabled}
|
||||
className={`block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-150 ${
|
||||
errors?.description ? 'ring-warning-amber' : 'ring-charcoal-outline'
|
||||
}`}
|
||||
placeholder="What makes your league special? Tell drivers what to expect..."
|
||||
/>
|
||||
</Box>
|
||||
{errors?.description && (
|
||||
<p className="text-xs text-warning-amber flex items-center gap-1.5">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
{errors.description}
|
||||
</p>
|
||||
<Text size="xs" color="text-warning-amber">
|
||||
<Stack direction="row" align="center" gap={1.5}>
|
||||
<Icon icon={AlertCircle} size={3} />
|
||||
{errors.description}
|
||||
</Stack>
|
||||
</Text>
|
||||
)}
|
||||
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline/50 p-4 space-y-3">
|
||||
<p className="text-xs text-gray-400">
|
||||
<span className="font-medium text-gray-300">Great descriptions include:</span>
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="w-3.5 h-3.5 text-performance-green shrink-0 mt-0.5" />
|
||||
<span className="text-xs text-gray-400">Racing style & pace</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="w-3.5 h-3.5 text-performance-green shrink-0 mt-0.5" />
|
||||
<span className="text-xs text-gray-400">Schedule & timezone</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="w-3.5 h-3.5 text-performance-green shrink-0 mt-0.5" />
|
||||
<span className="text-xs text-gray-400">Community vibe</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Surface variant="muted" rounded="lg" border padding={4}>
|
||||
<Box mb={3}>
|
||||
<Text size="xs" color="text-gray-400">
|
||||
<Text weight="medium" color="text-gray-300">Great descriptions include:</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
<Grid cols={3} gap={3}>
|
||||
{[
|
||||
'Racing style & pace',
|
||||
'Schedule & timezone',
|
||||
'Community vibe'
|
||||
].map(item => (
|
||||
<Stack key={item} direction="row" align="start" gap={2}>
|
||||
<Icon icon={Check} size={3.5} color="text-performance-green" className="mt-0.5" />
|
||||
<Text size="xs" color="text-gray-400">{item}</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</Grid>
|
||||
</Surface>
|
||||
</Stack>
|
||||
|
||||
{/* Game Platform */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-300">
|
||||
<Gamepad2 className="w-4 h-4 text-gray-400" />
|
||||
Game platform
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Stack gap={2}>
|
||||
<Text as="label" size="sm" weight="medium" color="text-gray-300">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Gamepad2} size={4} color="text-gray-400" />
|
||||
Game platform
|
||||
</Stack>
|
||||
</Text>
|
||||
<Box position="relative">
|
||||
<Input value="iRacing" disabled />
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-500">
|
||||
More platforms soon
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Box position="absolute" right={3} top="50%" style={{ transform: 'translateY(-50%)' }}>
|
||||
<Text size="xs" color="text-gray-500">
|
||||
More platforms soon
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user