wip

apps/website/components/leagues/LeagueBasicsSection.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import Input from '@/components/ui/Input';
+import type {
+  LeagueConfigFormModel,
+} from '@gridpilot/racing/application';
+
+interface LeagueBasicsSectionProps {
+  form: LeagueConfigFormModel;
+  onChange?: (form: LeagueConfigFormModel) => void;
+  errors?: {
+    name?: string;
+    visibility?: string;
+  };
+  readOnly?: boolean;
+}
+
+export function LeagueBasicsSection({
+  form,
+  onChange,
+  errors,
+  readOnly,
+}: LeagueBasicsSectionProps) {
+  const basics = form.basics;
+  const disabled = readOnly || !onChange;
+
+  const updateBasics = (patch: Partial<typeof basics>) => {
+    if (!onChange) return;
+    onChange({
+      ...form,
+      basics: {
+        ...form.basics,
+        ...patch,
+      },
+    });
+  };
+
+  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>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Game
+            </label>
+            <Input value="iRacing" disabled />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}