refactor: merge company and job form into single step

- Reduced form from 3 steps to 2 steps
- Step 1 now contains both company and job data with visual separator
- Step 2 is confirmation only
- Updated progress indicators and card headers
- Fixed navigation button references
This commit is contained in:
Tiago Yamamoto 2025-12-26 15:53:15 -03:00
parent 249081554d
commit afab4e89cd

View file

@ -58,7 +58,7 @@ const getSalaryPeriodLabel = (type: string): string => {
export default function PostJobPage() {
const router = useRouter();
const [step, setStep] = useState<1 | 2 | 3>(1);
const [step, setStep] = useState<1 | 2>(1);
const [loading, setLoading] = useState(false);
// Company/User data
@ -217,7 +217,7 @@ export default function PostJobPage() {
{/* Progress Steps */}
<div className="flex justify-center gap-4 mb-8">
{[1, 2, 3].map((s) => (
{[1, 2].map((s) => (
<div
key={s}
className={`flex items-center gap-2 ${step >= s ? "text-primary" : "text-muted-foreground"}`}
@ -226,7 +226,7 @@ export default function PostJobPage() {
{s}
</div>
<span className="hidden sm:inline text-sm">
{s === 1 ? "Empresa" : s === 2 ? "Vaga" : "Confirmar"}
{s === 1 ? "Dados" : "Confirmar"}
</span>
</div>
))}
@ -235,14 +235,12 @@ export default function PostJobPage() {
<Card>
<CardHeader>
<CardTitle>
{step === 1 && "Dados da Empresa"}
{step === 2 && "Detalhes da Vaga"}
{step === 3 && "Confirmar e Publicar"}
{step === 1 && "Empresa & Vaga"}
{step === 2 && "Confirmar e Publicar"}
</CardTitle>
<CardDescription>
{step === 1 && "Informe os dados da sua empresa para criar a conta"}
{step === 2 && "Descreva a vaga que você deseja publicar"}
{step === 3 && "Revise as informações antes de publicar"}
{step === 1 && "Informe os dados da empresa e da vaga"}
{step === 2 && "Revise as informações antes de publicar"}
</CardDescription>
</CardHeader>
<CardContent>
@ -414,15 +412,13 @@ export default function PostJobPage() {
/>
</div>
<Button onClick={() => setStep(2)} className="w-full">
Próximo: Dados da Vaga
</Button>
</div>
)}
{/* Separator */}
<div className="border-t pt-6 mt-6">
<h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
<Briefcase className="h-5 w-5" /> Dados da Vaga
</h3>
</div>
{/* Step 2: Job */}
{step === 2 && (
<div className="space-y-4">
<div>
<Label>Título da Vaga *</Label>
<div className="relative">
@ -585,19 +581,15 @@ export default function PostJobPage() {
</select>
</div>
</div>
<div className="flex gap-3">
<Button variant="outline" onClick={() => setStep(1)} className="flex-1">
Voltar
</Button>
<Button onClick={() => setStep(3)} className="flex-1">
Próximo: Confirmar
</Button>
</div>
<Button onClick={() => setStep(2)} className="w-full">
Próximo: Confirmar
</Button>
</div>
)}
{/* Step 3: Confirm */}
{step === 3 && (
{/* Step 2: Confirm */}
{step === 2 && (
<div className="space-y-6">
<div className="bg-muted/50 rounded-lg p-4">
<h3 className="font-semibold mb-2 flex items-center gap-2">
@ -623,7 +615,7 @@ export default function PostJobPage() {
<p><strong>Tipo:</strong> {job.employmentType || "Qualquer"} / {job.workingHours === 'full-time' ? 'Integral' : job.workingHours === 'part-time' ? 'Meio Período' : 'Qualquer'} / {job.workMode}</p>
</div>
<div className="flex gap-3">
<Button variant="outline" onClick={() => setStep(2)} className="flex-1">
<Button variant="outline" onClick={() => setStep(1)} className="flex-1">
Voltar
</Button>
<Button onClick={handleSubmit} disabled={loading} className="flex-1">
@ -635,9 +627,9 @@ export default function PostJobPage() {
</CardContent>
</Card>
</div>
</main>
</main >
<Footer />
</div>
</div >
);
}