wip

apps/website/components/leagues/LeagueBasicsSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { FileText, Globe, Lock, Gamepad2 } from 'lucide-react';
 import Input from '@/components/ui/Input';
 import type {
   LeagueConfigFormModel,
@@ -37,91 +38,143 @@ export function LeagueBasicsSection({
 
   return (
     <div className="space-y-6">
-      <h2 className="text-lg font-semibold text-white">Step 1 — Basics</h2>
-      <div className="space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">
-            League name *
-          </label>
-          <Input
-            value={basics.name}
-            onChange={(e) => updateBasics({ name: e.target.value })}
-            placeholder="GridPilot Sprint Series"
-            error={!!errors?.name}
-            errorMessage={errors?.name}
-            disabled={disabled}
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-300 mb-2">
-            Description
-          </label>
-          <textarea
-            value={basics.description ?? ''}
-            onChange={(e) =>
-              updateBasics({
-                description: e.target.value,
-              })
-            }
-            rows={3}
-            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 ring-charcoal-outline placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue text-sm disabled:opacity-60 disabled:cursor-not-allowed"
-            placeholder="Weekly league with structured championships and live standings."
-          />
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <span className="block text-sm font-medium text-gray-300 mb-2">
-              Visibility *
-            </span>
-            <div className="flex gap-3">
-              <button
-                type="button"
-                disabled={disabled}
-                onClick={() =>
-                  updateBasics({
-                    visibility: 'public',
-                  })
-                }
-                className={`flex-1 px-3 py-2 text-xs rounded-md border ${
-                  basics.visibility === 'public'
-                    ? 'border-primary-blue bg-primary-blue/10 text-primary-blue'
-                    : 'border-charcoal-outline bg-iron-gray text-gray-300'
-                } ${disabled ? 'opacity-60 cursor-not-allowed' : ''}`}
-              >
-                Public
-              </button>
-              <button
-                type="button"
-                disabled={disabled}
-                onClick={() =>
-                  updateBasics({
-                    visibility: 'private',
-                  })
-                }
-                className={`flex-1 px-3 py-2 text-xs rounded-md border ${
-                  basics.visibility === 'private'
-                    ? 'border-primary-blue bg-primary-blue/10 text-primary-blue'
-                    : 'border-charcoal-outline bg-iron-gray text-gray-300'
-                } ${disabled ? 'opacity-60 cursor-not-allowed' : ''}`}
-              >
-                Private
-              </button>
-            </div>
-            {errors?.visibility && (
-              <p className="mt-1 text-xs text-warning-amber">
-                {errors.visibility}
-              </p>
-            )}
+      {/* League name */}
+      <div className="space-y-2">
+        <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>
+        <Input
+          value={basics.name}
+          onChange={(e) => updateBasics({ name: e.target.value })}
+          placeholder="e.g., GridPilot Sprint Series"
+          error={!!errors?.name}
+          errorMessage={errors?.name}
+          disabled={disabled}
+          autoFocus
+        />
+        <div className="space-y-1">
+          <p className="text-xs text-gray-500">
+            Choose a clear, memorable name that describes your league
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => updateBasics({ name: 'Weekly Sprint Championship' })}
+              className="text-xs text-primary-blue hover:text-primary-blue/80 transition-colors"
+              disabled={disabled}
+            >
+              Example: Weekly Sprint Championship
+            </button>
+            <span className="text-xs text-gray-600">•</span>
+            <button
+              type="button"
+              onClick={() => updateBasics({ name: 'Sunday Evening Endurance' })}
+              className="text-xs text-primary-blue hover:text-primary-blue/80 transition-colors"
+              disabled={disabled}
+            >
+              Example: Sunday Evening Endurance
+            </button>
           </div>
+        </div>
+      </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-300 mb-2">
-              Game
-            </label>
+      {/* Description */}
+      <div className="space-y-2">
+        <label className="flex items-center gap-2 text-sm font-medium text-gray-300">
+          <FileText className="w-4 h-4 text-gray-400" />
+          Description (optional)
+        </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 ring-charcoal-outline 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"
+          placeholder="Example: A competitive sprint racing series held every Sunday at 19:00 CET. We focus on close racing and fair play. All skill levels welcome!"
+        />
+        <div className="space-y-1">
+          <p className="text-xs text-gray-500">
+            Help potential members understand your league's style, schedule, and community
+          </p>
+          <div className="text-xs text-gray-500">
+            <span className="font-medium text-gray-400">Tip:</span> Mention your racing style, typical schedule, and skill level expectations
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Visibility */}
+        <div className="space-y-2">
+          <label className="flex items-center gap-2 text-sm font-medium text-gray-300">
+            <Globe className="w-4 h-4 text-primary-blue" />
+            Visibility *
+          </label>
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() =>
+                updateBasics({
+                  visibility: 'public',
+                })
+              }
+              className={`group relative flex flex-col items-center gap-2 px-4 py-4 text-sm rounded-lg border transition-all duration-200 ${
+                basics.visibility === 'public'
+                  ? 'border-primary-blue bg-primary-blue/10 text-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.2)]'
+                  : 'border-charcoal-outline bg-iron-gray/50 text-gray-300 hover:border-gray-500 hover:bg-iron-gray'
+              } ${disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}
+            >
+              <Globe className={`w-5 h-5 ${basics.visibility === 'public' ? 'text-primary-blue' : 'text-gray-400'}`} />
+              <div className="text-center">
+                <div className="font-medium">Public</div>
+                <div className="text-xs text-gray-500 mt-0.5">Anyone can join</div>
+              </div>
+            </button>
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() =>
+                updateBasics({
+                  visibility: 'private',
+                })
+              }
+              className={`group relative flex flex-col items-center gap-2 px-4 py-4 text-sm rounded-lg border transition-all duration-200 ${
+                basics.visibility === 'private'
+                  ? 'border-primary-blue bg-primary-blue/10 text-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.2)]'
+                  : 'border-charcoal-outline bg-iron-gray/50 text-gray-300 hover:border-gray-500 hover:bg-iron-gray'
+              } ${disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}
+            >
+              <Lock className={`w-5 h-5 ${basics.visibility === 'private' ? 'text-primary-blue' : 'text-gray-400'}`} />
+              <div className="text-center">
+                <div className="font-medium">Private</div>
+                <div className="text-xs text-gray-500 mt-0.5">Invite only</div>
+              </div>
+            </button>
+          </div>
+          {errors?.visibility && (
+            <p className="mt-1 text-xs text-warning-amber flex items-center gap-1">
+              <span>⚠️</span>
+              {errors.visibility}
+            </p>
+          )}
+        </div>
+
+        {/* Game */}
+        <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">
             <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>