5716870863
Audit finding: the crew form was one 1,100-line endless scroll with ~15
sections in a punishing order (logo dead-last, MLS chat coordinator sitting
inline with the crew name), only one validation gate, and no sense of
progress or what's optional.
Fix — split the flow by intent:
- Create mode: a guided 4-step wizard with a sticky progress bar, per-step
hints, Back/Continue + "Skip to end", and a sticky footer nav.
1. The Basics — logo, name, about, home turf (all you actually need)
2. Identity & Vibe — vibe tags, crew type
3. Squad & Spots — members/roles, home spots, open call
4. Extras — treasury, video, sponsor, links, band, NIP-05,
agent, and the advanced chat coordinator (reframed
in plain language, clearly skippable)
Only the crew name is gated, and only at step 1. Clickable step dots allow
jumping back freely.
- Edit mode: unchanged UX intent — renders every section flat on one page
(power users want it all at once).
All field state and the entire publish/handleSubmit logic are preserved
verbatim; sections were extracted into composable blocks with zero behavior
change. Softened the coordinator copy and the map-pin section so a first-timer
isn't scared off.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { useSeoMeta } from '@unhead/react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Layout } from '@/components/Layout';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { LoginArea } from '@/components/auth/LoginArea';
|
|
import { CrewForm } from '@/components/CrewForm';
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { Users, ArrowLeft } from 'lucide-react';
|
|
|
|
export default function CreateCrewPage() {
|
|
useSeoMeta({
|
|
title: 'Create a Crew - SkateSpots',
|
|
description: 'Create your skate crew — home turf, members and spots.',
|
|
});
|
|
|
|
const { user } = useCurrentUser();
|
|
|
|
if (!user) {
|
|
return (
|
|
<Layout>
|
|
<div className="container px-4 py-8">
|
|
<Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
|
|
<CardContent className="py-12 text-center">
|
|
<Users className="h-12 w-12 mx-auto mb-4 text-gray-600" />
|
|
<h2 className="text-xl font-bold mb-2">Login Required</h2>
|
|
<p className="text-gray-400 mb-6">You need to log in to create a crew.</p>
|
|
<LoginArea className="justify-center max-w-60 mx-auto" />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
|
|
<div className="mb-6">
|
|
<Link to="/crews" className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back to Crews
|
|
</Link>
|
|
<h1 className="text-3xl font-black uppercase text-teal-400" style={{ fontFamily: 'Impact, "Arial Black", sans-serif' }}>
|
|
Create a Crew
|
|
</h1>
|
|
<p className="text-gray-400 mt-1">Your skate family — the people you skate with. Just a name gets you started; everything else is optional.</p>
|
|
</div>
|
|
<CrewForm />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|