website refactor

apps/website/components/leagues/LeagueBasicsSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { FileText, Gamepad2, AlertCircle, Check } from 'lucide-react';
+import { FileText, Gamepad2, Check } from 'lucide-react';
 import { Input } from '@/ui/Input';
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
 import { Box } from '@/ui/Box';
@@ -12,6 +12,7 @@ import { Icon } from '@/ui/Icon';
 import { Grid } from '@/ui/Grid';
 import { Surface } from '@/ui/Surface';
 import { Button } from '@/ui/Button';
+import { TextArea } from '@/ui/TextArea';
 
 interface LeagueBasicsSectionProps {
   form: LeagueConfigFormModel;
@@ -61,15 +62,15 @@ export function LeagueBasicsSection({
 
       {/* League name */}
       <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
+          label={
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={FileText} size={4} color="var(--primary-blue)" />
+              <Text size="sm" weight="medium" color="text-gray-300">League name *</Text>
+            </Stack>
+          }
           value={basics.name}
-          onChange={(e) => updateBasics({ name: e.target.value })}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateBasics({ name: e.target.value })}
           placeholder="e.g., GridPilot Sprint Series"
           variant={errors?.name ? 'error' : 'default'}
           errorMessage={errors?.name}
@@ -93,8 +94,12 @@ export function LeagueBasicsSection({
                 onClick={() => updateBasics({ name })}
                 variant="secondary"
                 size="sm"
-                className="h-auto py-0.5 px-2 rounded-full text-xs"
                 disabled={disabled}
+                rounded="full"
+                fontSize="0.75rem"
+                px={2}
+                py={0.5}
+                h="auto"
               >
                 {name}
               </Button>
@@ -104,74 +109,61 @@ export function LeagueBasicsSection({
       </Stack>
 
       {/* Description - Now Required */}
-      <Stack gap={3}>
-        <Text as="label" size="sm" weight="medium" color="text-gray-300">
+      <TextArea
+        label={
           <Stack direction="row" align="center" gap={2}>
-            <Icon icon={FileText} size={4} color="text-primary-blue" />
-            Tell your story *
+            <Icon icon={FileText} size={4} color="var(--primary-blue)" />
+            <Text size="sm" weight="medium" color="text-gray-300">Tell your story *</Text>
           </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 && (
-          <Text size="xs" color="text-warning-amber">
-            <Stack direction="row" align="center" gap={1.5}>
-              <Icon icon={AlertCircle} size={3} />
-              {errors.description}
-            </Stack>
+        }
+        value={basics.description ?? ''}
+        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+          updateBasics({
+            description: e.target.value,
+          })
+        }
+        rows={4}
+        disabled={disabled}
+        variant={errors?.description ? 'error' : 'default'}
+        errorMessage={errors?.description}
+        placeholder="What makes your league special? Tell drivers what to expect..."
+      />
+
+      <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>
-        )}
-        <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>
+        </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="var(--performance-green)" mt={0.5} />
+              <Text size="xs" color="text-gray-400">{item}</Text>
+            </Stack>
+          ))}
+        </Grid>
+      </Surface>
 
       {/* Game Platform */}
       <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>
+        <Input
+          label={
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Gamepad2} size={4} color="var(--text-gray-400)" />
+              <Text size="sm" weight="medium" color="text-gray-300">Game platform</Text>
+            </Stack>
+          }
+          value="iRacing"
+          disabled
+        />
+        <Text size="xs" color="text-gray-500">
+          More platforms soon
         </Text>
-        <Box position="relative">
-          <Input value="iRacing" disabled />
-          <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>
   );