diff --git a/src/components/CrewForm.tsx b/src/components/CrewForm.tsx index 844435a..3e1478b 100644 --- a/src/components/CrewForm.tsx +++ b/src/components/CrewForm.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, type ReactNode } from 'react'; import { nip19 } from 'nostr-tools'; import ngeohash from 'ngeohash'; import { useNavigate } from 'react-router-dom'; @@ -153,6 +153,12 @@ export function CrewForm({ existing }: CrewFormProps) { const { mutateAsync: uploadFile, isPending: isUploading } = useUploadFile(); const { toast } = useToast(); + // Create flow = guided wizard; edit flow = flat single page (power users + // want everything at once). The wizard staggers the ~15 sections into 4 + // digestible steps so a first-timer can spin up a crew in seconds. + const isEditing = !!existing; + const [step, setStep] = useState(0); + const [name, setName] = useState(existing?.name ?? ''); const [bio, setBio] = useState(existing?.bio ?? ''); const [location, setLocation] = useState(existing?.location ?? ''); @@ -488,26 +494,76 @@ export function CrewForm({ existing }: CrewFormProps) { } }; - return ( -
- - - - {existing ? 'Edit Crew' : 'Crew Details'} - - Your crew's identity, home turf and members - - -
- - setName(e.target.value)} className="bg-gray-800 border-gray-700" /> -
+ // ─── Section blocks ───────────────────────────────────────────────────── + // Each visible field group is a self-contained element that closes over the + // component's state. They're composed into wizard steps (create) or one flat + // scroll (edit) below — no field or publish logic changes between modes. -
- -