Merge pull request #14 from rede5/codex/translate-slug-to-english
Add /jobs routes and redirect legacy /vagas to /jobs
This commit is contained in:
Tiago Yamamoto
GitHub
commit
7a600dad73
11 changed files with 1638 additions and 1613 deletions
|
|
@ -66,7 +66,7 @@ O tema está definido em `src/app/globals.css` usando CSS variables com cores `o
|
||||||
| Rota | Descrição | Acesso |
|
| Rota | Descrição | Acesso |
|
||||||
|------|-----------|--------|
|
|------|-----------|--------|
|
||||||
| `/` | Landing page | Público |
|
| `/` | Landing page | Público |
|
||||||
| `/vagas` | Listagem de vagas | Público |
|
| `/jobs` | Listagem de vagas | Público |
|
||||||
| `/login` | Autenticação | Público |
|
| `/login` | Autenticação | Público |
|
||||||
| `/dashboard/admin` | Painel admin | SuperAdmin |
|
| `/dashboard/admin` | Painel admin | SuperAdmin |
|
||||||
| `/dashboard/empresa` | Painel empresa | CompanyAdmin, Recruiter |
|
| `/dashboard/empresa` | Painel empresa | CompanyAdmin, Recruiter |
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<priority>1.0</priority>
|
<priority>1.0</priority>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://gohorsejobs.com/vagas</loc>
|
<loc>https://gohorsejobs.com/jobs</loc>
|
||||||
<lastmod>2025-12-14</lastmod>
|
<lastmod>2025-12-14</lastmod>
|
||||||
<changefreq>daily</changefreq>
|
<changefreq>daily</changefreq>
|
||||||
<priority>0.9</priority>
|
<priority>0.9</priority>
|
||||||
|
|
@ -28,25 +28,25 @@
|
||||||
|
|
||||||
<!-- Vagas por Tecnologia -->
|
<!-- Vagas por Tecnologia -->
|
||||||
<url>
|
<url>
|
||||||
<loc>https://gohorsejobs.com/vagas?tech=python</loc>
|
<loc>https://gohorsejobs.com/jobs?tech=python</loc>
|
||||||
<lastmod>2025-12-14</lastmod>
|
<lastmod>2025-12-14</lastmod>
|
||||||
<changefreq>daily</changefreq>
|
<changefreq>daily</changefreq>
|
||||||
<priority>0.8</priority>
|
<priority>0.8</priority>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://gohorsejobs.com/vagas?tech=react</loc>
|
<loc>https://gohorsejobs.com/jobs?tech=react</loc>
|
||||||
<lastmod>2025-12-14</lastmod>
|
<lastmod>2025-12-14</lastmod>
|
||||||
<changefreq>daily</changefreq>
|
<changefreq>daily</changefreq>
|
||||||
<priority>0.8</priority>
|
<priority>0.8</priority>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://gohorsejobs.com/vagas?tech=nodejs</loc>
|
<loc>https://gohorsejobs.com/jobs?tech=nodejs</loc>
|
||||||
<lastmod>2025-12-14</lastmod>
|
<lastmod>2025-12-14</lastmod>
|
||||||
<changefreq>daily</changefreq>
|
<changefreq>daily</changefreq>
|
||||||
<priority>0.8</priority>
|
<priority>0.8</priority>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://gohorsejobs.com/vagas?tech=dados</loc>
|
<loc>https://gohorsejobs.com/jobs?tech=dados</loc>
|
||||||
<lastmod>2025-12-14</lastmod>
|
<lastmod>2025-12-14</lastmod>
|
||||||
<changefreq>daily</changefreq>
|
<changefreq>daily</changefreq>
|
||||||
<priority>0.8</priority>
|
<priority>0.8</priority>
|
||||||
|
|
@ -54,13 +54,13 @@
|
||||||
|
|
||||||
<!-- Vagas por Tipo -->
|
<!-- Vagas por Tipo -->
|
||||||
<url>
|
<url>
|
||||||
<loc>https://gohorsejobs.com/vagas?type=remoto</loc>
|
<loc>https://gohorsejobs.com/jobs?type=remoto</loc>
|
||||||
<lastmod>2025-12-14</lastmod>
|
<lastmod>2025-12-14</lastmod>
|
||||||
<changefreq>daily</changefreq>
|
<changefreq>daily</changefreq>
|
||||||
<priority>0.8</priority>
|
<priority>0.8</priority>
|
||||||
</url>
|
</url>
|
||||||
<url>
|
<url>
|
||||||
<loc>https://gohorsejobs.com/vagas?type=full-time</loc>
|
<loc>https://gohorsejobs.com/jobs?type=full-time</loc>
|
||||||
<lastmod>2025-12-14</lastmod>
|
<lastmod>2025-12-14</lastmod>
|
||||||
<changefreq>daily</changefreq>
|
<changefreq>daily</changefreq>
|
||||||
<priority>0.7</priority>
|
<priority>0.7</priority>
|
||||||
|
|
|
||||||
619
frontend/src/app/jobs/[id]/candidatura/page.tsx
Normal file
619
frontend/src/app/jobs/[id]/candidatura/page.tsx
Normal file
|
|
@ -0,0 +1,619 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, use } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import {
|
||||||
|
ChevronRight,
|
||||||
|
ChevronLeft,
|
||||||
|
Upload,
|
||||||
|
CheckCircle2,
|
||||||
|
Briefcase,
|
||||||
|
FileText,
|
||||||
|
User,
|
||||||
|
MessageSquare,
|
||||||
|
Save,
|
||||||
|
ArrowLeft,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { Navbar } from "@/components/navbar";
|
||||||
|
import { Footer } from "@/components/footer";
|
||||||
|
import { useNotify } from "@/contexts/notification-context";
|
||||||
|
import { mockJobs } from "@/lib/mock-data";
|
||||||
|
|
||||||
|
// Definição Dos Passos
|
||||||
|
const steps = [
|
||||||
|
{ id: 1, title: "Dados Pessoais", icon: User },
|
||||||
|
{ id: 2, title: "Currículo e Documentos", icon: FileText },
|
||||||
|
{ id: 3, title: "Experiência", icon: Briefcase },
|
||||||
|
{ id: 4, title: "Perguntas Adicionais", icon: MessageSquare },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export const runtime = 'edge';
|
||||||
|
|
||||||
|
export default function JobApplicationPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}) {
|
||||||
|
const { id } = use(params);
|
||||||
|
const router = useRouter();
|
||||||
|
const notify = useNotify();
|
||||||
|
const [currentStep, setCurrentStep] = useState(1);
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
|
||||||
|
// Achar os detalhes da vaga
|
||||||
|
const job = mockJobs.find((j) => j.id === id) || mockJobs[0];
|
||||||
|
|
||||||
|
// Estado do formulário
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
// Etapa 1
|
||||||
|
fullName: "",
|
||||||
|
email: "",
|
||||||
|
phone: "",
|
||||||
|
linkedin: "",
|
||||||
|
privacyAccepted: false,
|
||||||
|
// Etapa 2
|
||||||
|
resume: null as File | null,
|
||||||
|
coverLetter: "",
|
||||||
|
portfolioUrl: "",
|
||||||
|
// Etapa 3
|
||||||
|
salaryExpectation: "",
|
||||||
|
hasExperience: "",
|
||||||
|
// Etapa 4
|
||||||
|
whyUs: "",
|
||||||
|
availability: [] as string[],
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleInputChange = (field: string, value: any) => {
|
||||||
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateStep = (step: number) => {
|
||||||
|
switch (step) {
|
||||||
|
case 1:
|
||||||
|
if (!formData.fullName || !formData.email || !formData.phone) {
|
||||||
|
notify.error(
|
||||||
|
"Campos obrigatórios",
|
||||||
|
"Por favor, preencha todos os campos obrigatórios."
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!formData.email.includes("@")) {
|
||||||
|
notify.error(
|
||||||
|
"E-mail inválido",
|
||||||
|
"Por favor, insira um e-mail válido."
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!formData.privacyAccepted) {
|
||||||
|
notify.error(
|
||||||
|
"Termos de Privacidade",
|
||||||
|
"Você precisa aceitar a política de privacidade para continuar."
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
case 2:
|
||||||
|
return true;
|
||||||
|
case 3:
|
||||||
|
if (!formData.salaryExpectation || !formData.hasExperience) {
|
||||||
|
notify.error(
|
||||||
|
"Campos obrigatórios",
|
||||||
|
"Por favor, responda todas as perguntas."
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
case 4:
|
||||||
|
if (!formData.whyUs || formData.availability.length === 0) {
|
||||||
|
notify.error(
|
||||||
|
"Campos obrigatórios",
|
||||||
|
"Por favor, preencha o motivo e selecione pelo menos uma disponibilidade."
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
default:
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (validateStep(currentStep)) {
|
||||||
|
if (currentStep < steps.length) {
|
||||||
|
setCurrentStep((prev) => prev + 1);
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
} else {
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
if (currentStep > 1) {
|
||||||
|
setCurrentStep((prev) => prev - 1);
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
setIsSubmitting(true);
|
||||||
|
// Simular um chamado de API
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||||
|
|
||||||
|
notify.success(
|
||||||
|
"Candidatura enviada com sucesso!",
|
||||||
|
`Boa sorte! Sua candidatura para ${job.title} foi recebida.`
|
||||||
|
);
|
||||||
|
|
||||||
|
router.push("/dashboard/candidato/candidaturas");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveDraft = () => {
|
||||||
|
notify.info(
|
||||||
|
"Rascunho salvo",
|
||||||
|
"Você pode continuar sua candidatura mais tarde."
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const progress = (currentStep / steps.length) * 100;
|
||||||
|
|
||||||
|
if (!job) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-muted/30">
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
<main className="flex-1 py-8">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<Link
|
||||||
|
href={`/jobs/${id}`}
|
||||||
|
className="inline-flex items-center text-sm text-muted-foreground hover:text-primary mb-4 transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||||
|
Voltar para detalhes da vaga
|
||||||
|
</Link>
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl md:text-3xl font-bold text-foreground">
|
||||||
|
Candidatura: {job.title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
{job.company} • {job.location}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-medium bg-primary/10 text-primary px-3 py-1 rounded-full self-start md:self-center">
|
||||||
|
Tempo estimado: 5 min
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progresso das etapas */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">
|
||||||
|
Etapa {currentStep} de {steps.length}:{" "}
|
||||||
|
<span className="text-foreground">
|
||||||
|
{steps[currentStep - 1].title}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-medium text-primary">
|
||||||
|
{Math.round(progress)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Progress value={progress} className="h-2" />
|
||||||
|
|
||||||
|
{/* Indicador de etapas (DESKTOP) */}
|
||||||
|
<div className="hidden md:flex justify-between mt-4 px-2">
|
||||||
|
{steps.map((step) => {
|
||||||
|
const Icon = step.icon;
|
||||||
|
const isActive = step.id === currentStep;
|
||||||
|
const isCompleted = step.id < currentStep;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={step.id}
|
||||||
|
className={`flex flex-col items-center gap-2 ${isActive
|
||||||
|
? "text-primary"
|
||||||
|
: isCompleted
|
||||||
|
? "text-primary/60"
|
||||||
|
: "text-muted-foreground"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`
|
||||||
|
w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors
|
||||||
|
${isActive
|
||||||
|
? "border-primary bg-primary text-primary-foreground"
|
||||||
|
: isCompleted
|
||||||
|
? "border-primary bg-primary/10 text-primary"
|
||||||
|
: "border-muted-foreground/30 bg-background"
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{isCompleted ? (
|
||||||
|
<CheckCircle2 className="h-5 w-5" />
|
||||||
|
) : (
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-medium">{step.title}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Conteúdo do formulário */}
|
||||||
|
<div className="grid gap-6">
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
<motion.div
|
||||||
|
key={currentStep}
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: -20 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<Card className="border-t-4 border-t-primary">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>{steps[currentStep - 1].title}</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Preencha as informações abaixo para continuar.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Etapa 1: Dados Pessoais */}
|
||||||
|
{currentStep === 1 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="fullName">Nome Completo *</Label>
|
||||||
|
<Input
|
||||||
|
id="fullName"
|
||||||
|
placeholder="Seu nome completo"
|
||||||
|
value={formData.fullName}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("fullName", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="email">E-mail *</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
placeholder="seu@email.com"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("email", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="phone">Telefone / WhatsApp *</Label>
|
||||||
|
<Input
|
||||||
|
id="phone"
|
||||||
|
placeholder="(00) 00000-0000"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("phone", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="linkedin">LinkedIn (URL)</Label>
|
||||||
|
<Input
|
||||||
|
id="linkedin"
|
||||||
|
placeholder="linkedin.com/in/seu-perfil"
|
||||||
|
value={formData.linkedin}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("linkedin", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2 pt-4">
|
||||||
|
<Checkbox
|
||||||
|
id="privacy"
|
||||||
|
checked={formData.privacyAccepted}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
handleInputChange("privacyAccepted", checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor="privacy"
|
||||||
|
className="text-sm font-normal text-muted-foreground"
|
||||||
|
>
|
||||||
|
Li e concordo com a{" "}
|
||||||
|
<a href="#" className="text-primary underline">
|
||||||
|
Política de Privacidade
|
||||||
|
</a>{" "}
|
||||||
|
e autorizo o tratamento dos meus dados para fins de
|
||||||
|
recrutamento.
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Etapa 2: Dccumentos */}
|
||||||
|
{currentStep === 2 && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Label>Currículo (CV) *</Label>
|
||||||
|
<div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center hover:bg-muted/50 transition-colors cursor-pointer">
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<div className="p-3 bg-primary/10 rounded-full text-primary">
|
||||||
|
<Upload className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-sm font-medium">
|
||||||
|
Clique para fazer upload ou arraste o arquivo
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
PDF, DOCX ou TXT (Máx. 5MB)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="portfolio">
|
||||||
|
Portfólio / Site Pessoal (Opcional)
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="portfolio"
|
||||||
|
placeholder="https://..."
|
||||||
|
value={formData.portfolioUrl}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("portfolioUrl", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="coverLetter">
|
||||||
|
Carta de Apresentação (Opcional)
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="coverLetter"
|
||||||
|
placeholder="Escreva uma breve apresentação sobre você..."
|
||||||
|
className="min-h-[150px]"
|
||||||
|
value={formData.coverLetter}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("coverLetter", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Etapa 3: Experiências */}
|
||||||
|
{currentStep === 3 && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="salary">Pretensão Salarial *</Label>
|
||||||
|
<Select
|
||||||
|
value={formData.salaryExpectation}
|
||||||
|
onValueChange={(val) =>
|
||||||
|
handleInputChange("salaryExpectation", val)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione uma faixa" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="ate-3k">
|
||||||
|
Até R$ 3.000
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="3k-5k">
|
||||||
|
R$ 3.000 - R$ 5.000
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="5k-8k">
|
||||||
|
R$ 5.000 - R$ 8.000
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="8k-12k">
|
||||||
|
R$ 8.000 - R$ 12.000
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="12k-plus">
|
||||||
|
Acima de R$ 12.000
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Label>
|
||||||
|
Você possui a experiência mínima requisitada para a
|
||||||
|
vaga? *
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex items-center space-x-2 border p-3 rounded-md flex-1 hover:bg-muted/50 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="experience"
|
||||||
|
id="exp-yes"
|
||||||
|
className="accent-primary h-4 w-4"
|
||||||
|
checked={formData.hasExperience === "yes"}
|
||||||
|
onChange={() =>
|
||||||
|
handleInputChange("hasExperience", "yes")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor="exp-yes"
|
||||||
|
className="cursor-pointer flex-1"
|
||||||
|
>
|
||||||
|
Sim, possuo
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 border p-3 rounded-md flex-1 hover:bg-muted/50 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="experience"
|
||||||
|
id="exp-no"
|
||||||
|
className="accent-primary h-4 w-4"
|
||||||
|
checked={formData.hasExperience === "no"}
|
||||||
|
onChange={() =>
|
||||||
|
handleInputChange("hasExperience", "no")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor="exp-no"
|
||||||
|
className="cursor-pointer flex-1"
|
||||||
|
>
|
||||||
|
Não possuo
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Etapa 4: Adicional */}
|
||||||
|
{currentStep === 4 && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="whyUs">
|
||||||
|
Por que você quer trabalhar na {job.company}? *
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
id="whyUs"
|
||||||
|
placeholder="Conte-nos o que te atrai na nossa empresa e nesta vaga..."
|
||||||
|
className="min-h-[150px]"
|
||||||
|
maxLength={1000}
|
||||||
|
value={formData.whyUs}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("whyUs", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="text-xs text-right text-muted-foreground">
|
||||||
|
{formData.whyUs.length}/1000 caracteres
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Label>Disponibilidade *</Label>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
{[
|
||||||
|
"Trabalho Presencial",
|
||||||
|
"Trabalho Remoto",
|
||||||
|
"Viagens",
|
||||||
|
"Início Imediato",
|
||||||
|
].map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className="flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id={`avail-${item}`}
|
||||||
|
checked={formData.availability.includes(item)}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
if (checked) {
|
||||||
|
handleInputChange("availability", [
|
||||||
|
...formData.availability,
|
||||||
|
item,
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
handleInputChange(
|
||||||
|
"availability",
|
||||||
|
formData.availability.filter(
|
||||||
|
(i) => i !== item
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Label htmlFor={`avail-${item}`}>{item}</Label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
<CardFooter className="flex justify-between border-t pt-6">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={handleBack}
|
||||||
|
disabled={currentStep === 1 || isSubmitting}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="mr-2 h-4 w-4" />
|
||||||
|
Voltar
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={handleSaveDraft}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="hidden sm:flex"
|
||||||
|
>
|
||||||
|
<Save className="mr-2 h-4 w-4" />
|
||||||
|
Salvar Rascunho
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="min-w-[120px]"
|
||||||
|
>
|
||||||
|
{isSubmitting ? (
|
||||||
|
"Enviando..."
|
||||||
|
) : currentStep === steps.length ? (
|
||||||
|
<>
|
||||||
|
Enviar Candidatura{" "}
|
||||||
|
<CheckCircle2 className="ml-2 h-4 w-4" />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
Próxima Etapa{" "}
|
||||||
|
<ChevronRight className="ml-2 h-4 w-4" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
528
frontend/src/app/jobs/[id]/page.tsx
Normal file
528
frontend/src/app/jobs/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,528 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { use } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Navbar } from "@/components/navbar";
|
||||||
|
import { Footer } from "@/components/footer";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { mockJobs } from "@/lib/mock-data";
|
||||||
|
import {
|
||||||
|
MapPin,
|
||||||
|
Briefcase,
|
||||||
|
DollarSign,
|
||||||
|
Calendar,
|
||||||
|
ArrowLeft,
|
||||||
|
CheckCircle2,
|
||||||
|
Building2,
|
||||||
|
Users,
|
||||||
|
Clock,
|
||||||
|
Heart,
|
||||||
|
Share2,
|
||||||
|
Bookmark,
|
||||||
|
Star,
|
||||||
|
Globe,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
|
||||||
|
export const runtime = 'edge';
|
||||||
|
|
||||||
|
export default function JobDetailPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}) {
|
||||||
|
const { id } = use(params);
|
||||||
|
const router = useRouter();
|
||||||
|
const [isFavorited, setIsFavorited] = useState(false);
|
||||||
|
const [isBookmarked, setIsBookmarked] = useState(false);
|
||||||
|
|
||||||
|
const job = mockJobs.find((j) => j.id === id);
|
||||||
|
|
||||||
|
if (!job) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col">
|
||||||
|
<Navbar />
|
||||||
|
<main className="flex-1 flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-center max-w-md mx-auto p-6"
|
||||||
|
>
|
||||||
|
<div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Briefcase className="w-8 h-8 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold mb-2">Vaga não encontrada</h1>
|
||||||
|
<p className="text-muted-foreground mb-6">
|
||||||
|
A vaga que você está procurando não existe ou foi removida.
|
||||||
|
</p>
|
||||||
|
<Link href="/jobs">
|
||||||
|
<Button>Ver todas as vagas</Button>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCompanyInitials = (company: string) => {
|
||||||
|
return company
|
||||||
|
.split(" ")
|
||||||
|
.map((word) => word[0])
|
||||||
|
.join("")
|
||||||
|
.toUpperCase()
|
||||||
|
.slice(0, 2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTimeAgo = (dateString: string) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
const now = new Date();
|
||||||
|
const diffInMs = now.getTime() - date.getTime();
|
||||||
|
const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
if (diffInDays === 0) return "Hoje";
|
||||||
|
if (diffInDays === 1) return "Ontem";
|
||||||
|
if (diffInDays < 7) return `${diffInDays} dias atrás`;
|
||||||
|
if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} semanas atrás`;
|
||||||
|
return `${Math.floor(diffInDays / 30)} meses atrás`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTypeLabel = (type: string) => {
|
||||||
|
const typeLabels: { [key: string]: string } = {
|
||||||
|
"full-time": "Tempo integral",
|
||||||
|
"part-time": "Meio período",
|
||||||
|
contract: "Contrato",
|
||||||
|
Remoto: "Remoto",
|
||||||
|
};
|
||||||
|
return typeLabels[type] || type;
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockCompanyInfo = {
|
||||||
|
size: "100-500 funcionários",
|
||||||
|
industry: "Tecnologia",
|
||||||
|
founded: "2015",
|
||||||
|
website: "www.empresa.com",
|
||||||
|
rating: 4.5,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col">
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
<main className="flex-1 py-8">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-5xl mx-auto">
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
className="mb-6"
|
||||||
|
>
|
||||||
|
<Link href="/jobs">
|
||||||
|
<Button variant="ghost" className="gap-2 hover:bg-muted">
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
Voltar para vagas
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-3 gap-8">
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
{/* Job Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex flex-col sm:flex-row items-start gap-4">
|
||||||
|
<Avatar className="h-16 w-16 shrink-0">
|
||||||
|
<AvatarImage
|
||||||
|
src={`https://avatar.vercel.sh/${job.company}`}
|
||||||
|
alt={job.company}
|
||||||
|
/>
|
||||||
|
<AvatarFallback className="bg-primary/10 text-primary font-bold text-lg">
|
||||||
|
{getCompanyInitials(job.company)}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
|
||||||
|
<div className="flex-1 w-full min-w-0">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<CardTitle className="text-xl sm:text-2xl md:text-3xl mb-2 leading-tight">
|
||||||
|
{job.title}
|
||||||
|
</CardTitle>
|
||||||
|
<div className="flex flex-wrap items-center gap-2 mb-3">
|
||||||
|
<Building2 className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground shrink-0" />
|
||||||
|
<CardDescription className="text-base sm:text-lg font-medium">
|
||||||
|
{job.company}
|
||||||
|
</CardDescription>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{mockCompanyInfo.rating}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden sm:flex gap-2 shrink-0">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setIsFavorited(!isFavorited)}
|
||||||
|
>
|
||||||
|
<Heart
|
||||||
|
className={`h-4 w-4 ${isFavorited
|
||||||
|
? "fill-red-500 text-red-500"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setIsBookmarked(!isBookmarked)}
|
||||||
|
>
|
||||||
|
<Bookmark
|
||||||
|
className={`h-4 w-4 ${isBookmarked ? "fill-current" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="icon">
|
||||||
|
<Share2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action buttons mobile */}
|
||||||
|
<div className="flex sm:hidden gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setIsFavorited(!isFavorited)}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
<Heart
|
||||||
|
className={`h-4 w-4 mr-1 ${isFavorited
|
||||||
|
? "fill-red-500 text-red-500"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
{isFavorited ? "Favoritado" : "Favoritar"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setIsBookmarked(!isBookmarked)}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
<Bookmark
|
||||||
|
className={`h-4 w-4 mr-1 ${isBookmarked ? "fill-current" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
{isBookmarked ? "Salvo" : "Salvar"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="shrink-0"
|
||||||
|
>
|
||||||
|
<Share2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Job Meta */}
|
||||||
|
<div className="flex flex-wrap gap-3 sm:gap-4 text-sm text-muted-foreground">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="h-4 w-4 shrink-0" />
|
||||||
|
<span className="truncate">{job.location}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Briefcase className="h-4 w-4 shrink-0" />
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{getTypeLabel(job.type)}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{job.salary && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DollarSign className="h-4 w-4 shrink-0" />
|
||||||
|
<span className="font-medium text-foreground whitespace-nowrap">
|
||||||
|
{job.salary}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock className="h-4 w-4 shrink-0" />
|
||||||
|
<span className="whitespace-nowrap">
|
||||||
|
{formatTimeAgo(job.postedAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Apply Button - Mobile */}
|
||||||
|
<div className="lg:hidden pt-4">
|
||||||
|
<Link
|
||||||
|
href={`/jobs/${job.id}/candidatura`}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Button size="lg" className="w-full cursor-pointer">
|
||||||
|
Candidatar-se
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Job Description */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl">Sobre a vaga</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="prose prose-sm max-w-none">
|
||||||
|
<p className="text-muted-foreground leading-relaxed whitespace-pre-line">
|
||||||
|
{job.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Requirements */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl">Requisitos</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
{job.requirements.map((req, index) => (
|
||||||
|
<div key={index} className="flex items-start gap-3">
|
||||||
|
<CheckCircle2 className="h-5 w-5 text-primary mt-0.5 shrink-0" />
|
||||||
|
<span className="text-muted-foreground">{req}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Company Info */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl">Sobre a empresa</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-muted-foreground leading-relaxed">
|
||||||
|
{job.company} é uma empresa líder no mercado,
|
||||||
|
comprometida em criar um ambiente de trabalho inclusivo
|
||||||
|
e inovador. Oferecemos benefícios competitivos e
|
||||||
|
oportunidades de crescimento profissional.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4 border-t">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
||||||
|
<Users className="h-4 w-4 shrink-0" />
|
||||||
|
<span>Tamanho</span>
|
||||||
|
</div>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{mockCompanyInfo.size}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
||||||
|
<Building2 className="h-4 w-4 shrink-0" />
|
||||||
|
<span>Setor</span>
|
||||||
|
</div>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{mockCompanyInfo.industry}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
||||||
|
<Calendar className="h-4 w-4 shrink-0" />
|
||||||
|
<span>Fundada</span>
|
||||||
|
</div>
|
||||||
|
<p className="font-medium text-sm">
|
||||||
|
{mockCompanyInfo.founded}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
||||||
|
<Globe className="h-4 w-4 shrink-0" />
|
||||||
|
<span>Website</span>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={`https://${mockCompanyInfo.website}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="font-medium text-sm text-primary hover:underline break-all"
|
||||||
|
>
|
||||||
|
{mockCompanyInfo.website}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="space-y-6 lg:sticky lg:top-20 lg:self-start">
|
||||||
|
{/* Apply Card - Desktop */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
className="hidden lg:block"
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">
|
||||||
|
Interessado na vaga?
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Candidate-se agora e faça parte da nossa equipe!
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<Link
|
||||||
|
href={`/jobs/${job.id}/candidatura`}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Button size="lg" className="w-full cursor-pointer">
|
||||||
|
Candidatar-se
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
Tipo de vaga:
|
||||||
|
</span>
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{getTypeLabel(job.type)}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<span className="text-muted-foreground shrink-0">
|
||||||
|
Localização:
|
||||||
|
</span>
|
||||||
|
<span className="font-medium text-right">
|
||||||
|
{job.location}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{job.salary && (
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
Salário:
|
||||||
|
</span>
|
||||||
|
<span className="font-medium text-right whitespace-nowrap">
|
||||||
|
{job.salary}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
Publicado:
|
||||||
|
</span>
|
||||||
|
<span className="font-medium text-right whitespace-nowrap">
|
||||||
|
{formatTimeAgo(job.postedAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Similar Jobs */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Vagas similares</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{mockJobs
|
||||||
|
.filter((j) => j.id !== job.id)
|
||||||
|
.slice(0, 3)
|
||||||
|
.map((similarJob) => (
|
||||||
|
<Link
|
||||||
|
key={similarJob.id}
|
||||||
|
href={`/jobs/${similarJob.id}`}
|
||||||
|
>
|
||||||
|
<div className="p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer">
|
||||||
|
<h4 className="font-medium text-sm mb-1 line-clamp-1">
|
||||||
|
{similarJob.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">
|
||||||
|
{similarJob.company}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<MapPin className="h-3 w-3" />
|
||||||
|
<span>{similarJob.location}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
<Link href="/jobs">
|
||||||
|
<Button variant="outline" size="sm" className="w-full">
|
||||||
|
Ver todas as vagas
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
463
frontend/src/app/jobs/page.tsx
Normal file
463
frontend/src/app/jobs/page.tsx
Normal file
|
|
@ -0,0 +1,463 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useSearchParams } from "next/navigation"
|
||||||
|
|
||||||
|
import { useEffect, useState, useMemo, Suspense } from "react"
|
||||||
|
import { Navbar } from "@/components/navbar"
|
||||||
|
import { Footer } from "@/components/footer"
|
||||||
|
import { JobCard } from "@/components/job-card"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import { Card, CardContent } from "@/components/ui/card"
|
||||||
|
import { PageSkeleton } from "@/components/loading-skeletons"
|
||||||
|
import { mockJobs } from "@/lib/mock-data"
|
||||||
|
import { jobsApi, transformApiJobToFrontend } from "@/lib/api"
|
||||||
|
import { useDebounce } from "@/hooks/use-utils"
|
||||||
|
import { useTranslation } from "@/lib/i18n"
|
||||||
|
import { Search, MapPin, Briefcase, SlidersHorizontal, X, ArrowUpDown } from "lucide-react"
|
||||||
|
import { motion, AnimatePresence } from "framer-motion"
|
||||||
|
import type { Job } from "@/lib/types"
|
||||||
|
|
||||||
|
function JobsContent() {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [jobs, setJobs] = useState<Job[]>([])
|
||||||
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const [searchTerm, setSearchTerm] = useState("")
|
||||||
|
const [locationFilter, setLocationFilter] = useState("all")
|
||||||
|
const [typeFilter, setTypeFilter] = useState("all")
|
||||||
|
const [workModeFilter, setWorkModeFilter] = useState("all")
|
||||||
|
const [sortBy, setSortBy] = useState("recent")
|
||||||
|
const [showFilters, setShowFilters] = useState(false)
|
||||||
|
|
||||||
|
const searchParams = useSearchParams()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const tech = searchParams.get("tech")
|
||||||
|
const q = searchParams.get("q")
|
||||||
|
const type = searchParams.get("type")
|
||||||
|
|
||||||
|
if (tech || q) {
|
||||||
|
setSearchTerm(tech || q || "")
|
||||||
|
setShowFilters(true) // Show filters if searching
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "remoto") {
|
||||||
|
setWorkModeFilter("remote")
|
||||||
|
setShowFilters(true)
|
||||||
|
}
|
||||||
|
}, [searchParams])
|
||||||
|
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const ITEMS_PER_PAGE = 10
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true
|
||||||
|
|
||||||
|
const fetchJobs = async () => {
|
||||||
|
setLoading(true)
|
||||||
|
setError(null)
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Fetch many jobs to allow client-side filtering and pagination
|
||||||
|
const response = await jobsApi.list({ limit: 1000, page: 1 })
|
||||||
|
const mappedJobs = response.data.map(transformApiJobToFrontend)
|
||||||
|
|
||||||
|
if (isMounted) {
|
||||||
|
setJobs(mappedJobs)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Erro ao buscar vagas", err)
|
||||||
|
if (isMounted) {
|
||||||
|
setError(t('jobs.error'))
|
||||||
|
setJobs(mockJobs)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (isMounted) {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchJobs()
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isMounted = false
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Debounce search term para otimizar performance
|
||||||
|
const debouncedSearchTerm = useDebounce(searchTerm, 300)
|
||||||
|
|
||||||
|
// Reset page when filters change
|
||||||
|
useEffect(() => {
|
||||||
|
setCurrentPage(1)
|
||||||
|
}, [debouncedSearchTerm, locationFilter, typeFilter, workModeFilter, sortBy])
|
||||||
|
|
||||||
|
// Extrair valores únicos para os filtros
|
||||||
|
const uniqueLocations = useMemo(() => {
|
||||||
|
const locations = jobs.map(job => job.location)
|
||||||
|
return Array.from(new Set(locations))
|
||||||
|
}, [jobs])
|
||||||
|
|
||||||
|
const uniqueTypes = useMemo(() => {
|
||||||
|
const types = jobs.map(job => job.type)
|
||||||
|
return Array.from(new Set(types))
|
||||||
|
}, [jobs])
|
||||||
|
|
||||||
|
const uniqueWorkModes = useMemo(() => {
|
||||||
|
const modes = jobs.map(job => job.workMode).filter(Boolean) as string[]
|
||||||
|
return Array.from(new Set(modes))
|
||||||
|
}, [jobs])
|
||||||
|
|
||||||
|
const filteredAndSortedJobs = useMemo(() => {
|
||||||
|
let filtered = jobs.filter((job) => {
|
||||||
|
const matchesSearch =
|
||||||
|
job.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
||||||
|
job.company.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
||||||
|
job.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
|
||||||
|
const matchesLocation = locationFilter === "all" || job.location.includes(locationFilter)
|
||||||
|
const matchesType = typeFilter === "all" || job.type === typeFilter
|
||||||
|
const matchesWorkMode = workModeFilter === "all" || job.workMode === workModeFilter
|
||||||
|
|
||||||
|
return matchesSearch && matchesLocation && matchesType && matchesWorkMode
|
||||||
|
})
|
||||||
|
|
||||||
|
// Ordenação
|
||||||
|
switch (sortBy) {
|
||||||
|
case "recent":
|
||||||
|
filtered.sort((a, b) => new Date(b.postedAt).getTime() - new Date(a.postedAt).getTime())
|
||||||
|
break
|
||||||
|
case "title":
|
||||||
|
filtered.sort((a, b) => a.title.localeCompare(b.title))
|
||||||
|
break
|
||||||
|
case "company":
|
||||||
|
filtered.sort((a, b) => a.company.localeCompare(b.company))
|
||||||
|
break
|
||||||
|
case "location":
|
||||||
|
filtered.sort((a, b) => a.location.localeCompare(b.location))
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
return filtered
|
||||||
|
}, [debouncedSearchTerm, locationFilter, typeFilter, workModeFilter, sortBy, jobs])
|
||||||
|
|
||||||
|
// Pagination Logic
|
||||||
|
const totalPages = Math.ceil(filteredAndSortedJobs.length / ITEMS_PER_PAGE)
|
||||||
|
const paginatedJobs = filteredAndSortedJobs.slice(
|
||||||
|
(currentPage - 1) * ITEMS_PER_PAGE,
|
||||||
|
currentPage * ITEMS_PER_PAGE
|
||||||
|
)
|
||||||
|
|
||||||
|
const hasActiveFilters = searchTerm || locationFilter !== "all" || typeFilter !== "all" || workModeFilter !== "all"
|
||||||
|
|
||||||
|
const clearFilters = () => {
|
||||||
|
setSearchTerm("")
|
||||||
|
setLocationFilter("all")
|
||||||
|
setTypeFilter("all")
|
||||||
|
setWorkModeFilter("all")
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="bg-gradient-to-br from-primary/10 via-primary/5 to-transparent py-12 md:py-16">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-3xl mx-auto text-center">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-4xl md:text-5xl font-bold text-foreground mb-4 text-balance"
|
||||||
|
>
|
||||||
|
{t('jobs.title')}
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
className="text-lg text-muted-foreground text-pretty"
|
||||||
|
>
|
||||||
|
{loading ? t('jobs.loading') : t('jobs.subtitle', { count: jobs.length })}
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Search and Filters Section */}
|
||||||
|
<section className="py-8 border-b bg-background/50">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-5xl mx-auto space-y-4">
|
||||||
|
{/* Main Search Bar */}
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4">
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder={t('jobs.search')}
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-10 h-12"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
|
className="h-12 gap-2"
|
||||||
|
>
|
||||||
|
<SlidersHorizontal className="h-4 w-4" />
|
||||||
|
{t('jobs.filters.toggle')}
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<Badge variant="secondary" className="ml-1 px-1 py-0 text-xs">
|
||||||
|
!
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Advanced Filters */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{showFilters && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, height: 0 }}
|
||||||
|
animate={{ opacity: 1, height: "auto" }}
|
||||||
|
exit={{ opacity: 0, height: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||||
|
<Select value={locationFilter} onValueChange={setLocationFilter}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<MapPin className="h-4 w-4 mr-2" />
|
||||||
|
<SelectValue placeholder={t('jobs.filters.location')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
||||||
|
{uniqueLocations.map((location) => (
|
||||||
|
<SelectItem key={location} value={location}>
|
||||||
|
{location}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<Briefcase className="h-4 w-4 mr-2" />
|
||||||
|
<SelectValue placeholder={t('jobs.filters.type')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
||||||
|
{uniqueTypes.map((type) => (
|
||||||
|
<SelectItem key={type} value={type}>
|
||||||
|
{type === "full-time" ? "Tempo integral" :
|
||||||
|
type === "part-time" ? "Meio período" :
|
||||||
|
type === "contract" ? "Contrato" : type}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={workModeFilter} onValueChange={setWorkModeFilter}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<MapPin className="h-4 w-4 mr-2" />
|
||||||
|
<SelectValue placeholder={t('jobs.filters.workMode')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
||||||
|
{uniqueWorkModes.map((mode) => (
|
||||||
|
<SelectItem key={mode} value={mode}>
|
||||||
|
{mode === "remote" ? t('workMode.remote') :
|
||||||
|
mode === "hybrid" ? t('workMode.hybrid') :
|
||||||
|
mode === "onsite" ? t('workMode.onsite') : mode}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
<Select value={sortBy} onValueChange={setSortBy}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<ArrowUpDown className="h-4 w-4 mr-2" />
|
||||||
|
<SelectValue placeholder={t('jobs.filters.order')} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="recent">{t('jobs.sort.recent')}</SelectItem>
|
||||||
|
<SelectItem value="title">{t('jobs.sort.title')}</SelectItem>
|
||||||
|
<SelectItem value="company">{t('jobs.sort.company')}</SelectItem>
|
||||||
|
<SelectItem value="location">{t('jobs.sort.location')}</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={clearFilters}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
{t('jobs.reset')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{/* Results Summary */}
|
||||||
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||||
|
<span>
|
||||||
|
{t('jobs.pagination.showing', {
|
||||||
|
from: (currentPage - 1) * ITEMS_PER_PAGE + 1,
|
||||||
|
to: Math.min(currentPage * ITEMS_PER_PAGE, filteredAndSortedJobs.length),
|
||||||
|
total: filteredAndSortedJobs.length
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span>Filtros ativos:</span>
|
||||||
|
{searchTerm && (
|
||||||
|
<Badge variant="secondary" className="gap-1">
|
||||||
|
"{searchTerm}"
|
||||||
|
<button onClick={() => setSearchTerm("")} className="ml-1">
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{locationFilter !== "all" && (
|
||||||
|
<Badge variant="secondary" className="gap-1">
|
||||||
|
{locationFilter}
|
||||||
|
<button onClick={() => setLocationFilter("all")} className="ml-1">
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{typeFilter !== "all" && (
|
||||||
|
<Badge variant="secondary" className="gap-1">
|
||||||
|
{typeFilter}
|
||||||
|
<button onClick={() => setTypeFilter("all")} className="ml-1">
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{workModeFilter !== "all" && (
|
||||||
|
<Badge variant="secondary" className="gap-1">
|
||||||
|
{workModeFilter === "remote" ? "Remoto" :
|
||||||
|
workModeFilter === "hybrid" ? "Híbrido" :
|
||||||
|
workModeFilter === "onsite" ? "Presencial" : workModeFilter}
|
||||||
|
<button onClick={() => setWorkModeFilter("all")} className="ml-1">
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Jobs Grid */}
|
||||||
|
<section className="py-12">
|
||||||
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-5xl mx-auto">
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 p-4 bg-amber-50 text-amber-900 rounded-lg border border-amber-200">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center text-muted-foreground">{t('jobs.loading')}</div>
|
||||||
|
) : paginatedJobs.length > 0 ? (
|
||||||
|
<div className="space-y-8">
|
||||||
|
<motion.div layout className="grid gap-6">
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
{paginatedJobs.map((job, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={job.id}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -20 }}
|
||||||
|
transition={{ delay: index * 0.05 }}
|
||||||
|
layout
|
||||||
|
>
|
||||||
|
<JobCard job={job} />
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Pagination Controls */}
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<div className="flex justify-center items-center gap-2 mt-8">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
{t('jobs.pagination.previous')}
|
||||||
|
</Button>
|
||||||
|
<div className="text-sm text-muted-foreground px-4">
|
||||||
|
{currentPage} / {totalPages}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
{t('jobs.pagination.next')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
className="text-center py-12"
|
||||||
|
>
|
||||||
|
<div className="max-w-md mx-auto">
|
||||||
|
<Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-semibold mb-2">{t('jobs.noResults.title')}</h3>
|
||||||
|
<p className="text-muted-foreground mb-4">
|
||||||
|
{t('jobs.noResults.desc')}
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={clearFilters}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
{t('jobs.resetFilters')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function VagasPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col">
|
||||||
|
<Navbar />
|
||||||
|
<main className="flex-1">
|
||||||
|
<Suspense fallback={<PageSkeleton />}>
|
||||||
|
<JobsContent />
|
||||||
|
</Suspense>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,619 +1,10 @@
|
||||||
"use client";
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
import { useState, use } from "react";
|
export default async function VagasJobApplicationRedirectPage({
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
|
||||||
import {
|
|
||||||
ChevronRight,
|
|
||||||
ChevronLeft,
|
|
||||||
Upload,
|
|
||||||
CheckCircle2,
|
|
||||||
Briefcase,
|
|
||||||
FileText,
|
|
||||||
User,
|
|
||||||
MessageSquare,
|
|
||||||
Save,
|
|
||||||
ArrowLeft,
|
|
||||||
} from "lucide-react";
|
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
|
||||||
import { Progress } from "@/components/ui/progress";
|
|
||||||
import { Separator } from "@/components/ui/separator";
|
|
||||||
import { Navbar } from "@/components/navbar";
|
|
||||||
import { Footer } from "@/components/footer";
|
|
||||||
import { useNotify } from "@/contexts/notification-context";
|
|
||||||
import { mockJobs } from "@/lib/mock-data";
|
|
||||||
|
|
||||||
// Definição Dos Passos
|
|
||||||
const steps = [
|
|
||||||
{ id: 1, title: "Dados Pessoais", icon: User },
|
|
||||||
{ id: 2, title: "Currículo e Documentos", icon: FileText },
|
|
||||||
{ id: 3, title: "Experiência", icon: Briefcase },
|
|
||||||
{ id: 4, title: "Perguntas Adicionais", icon: MessageSquare },
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
export const runtime = 'edge';
|
|
||||||
|
|
||||||
export default function JobApplicationPage({
|
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
params: Promise<{ id: string }>;
|
params: Promise<{ id: string }>;
|
||||||
}) {
|
}) {
|
||||||
const { id } = use(params);
|
const { id } = await params;
|
||||||
const router = useRouter();
|
redirect(`/jobs/${id}/candidatura`);
|
||||||
const notify = useNotify();
|
|
||||||
const [currentStep, setCurrentStep] = useState(1);
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
||||||
|
|
||||||
// Achar os detalhes da vaga
|
|
||||||
const job = mockJobs.find((j) => j.id === id) || mockJobs[0];
|
|
||||||
|
|
||||||
// Estado do formulário
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
// Etapa 1
|
|
||||||
fullName: "",
|
|
||||||
email: "",
|
|
||||||
phone: "",
|
|
||||||
linkedin: "",
|
|
||||||
privacyAccepted: false,
|
|
||||||
// Etapa 2
|
|
||||||
resume: null as File | null,
|
|
||||||
coverLetter: "",
|
|
||||||
portfolioUrl: "",
|
|
||||||
// Etapa 3
|
|
||||||
salaryExpectation: "",
|
|
||||||
hasExperience: "",
|
|
||||||
// Etapa 4
|
|
||||||
whyUs: "",
|
|
||||||
availability: [] as string[],
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleInputChange = (field: string, value: any) => {
|
|
||||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const validateStep = (step: number) => {
|
|
||||||
switch (step) {
|
|
||||||
case 1:
|
|
||||||
if (!formData.fullName || !formData.email || !formData.phone) {
|
|
||||||
notify.error(
|
|
||||||
"Campos obrigatórios",
|
|
||||||
"Por favor, preencha todos os campos obrigatórios."
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (!formData.email.includes("@")) {
|
|
||||||
notify.error(
|
|
||||||
"E-mail inválido",
|
|
||||||
"Por favor, insira um e-mail válido."
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (!formData.privacyAccepted) {
|
|
||||||
notify.error(
|
|
||||||
"Termos de Privacidade",
|
|
||||||
"Você precisa aceitar a política de privacidade para continuar."
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
case 2:
|
|
||||||
return true;
|
|
||||||
case 3:
|
|
||||||
if (!formData.salaryExpectation || !formData.hasExperience) {
|
|
||||||
notify.error(
|
|
||||||
"Campos obrigatórios",
|
|
||||||
"Por favor, responda todas as perguntas."
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
case 4:
|
|
||||||
if (!formData.whyUs || formData.availability.length === 0) {
|
|
||||||
notify.error(
|
|
||||||
"Campos obrigatórios",
|
|
||||||
"Por favor, preencha o motivo e selecione pelo menos uma disponibilidade."
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
default:
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNext = () => {
|
|
||||||
if (validateStep(currentStep)) {
|
|
||||||
if (currentStep < steps.length) {
|
|
||||||
setCurrentStep((prev) => prev + 1);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
} else {
|
|
||||||
handleSubmit();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
if (currentStep > 1) {
|
|
||||||
setCurrentStep((prev) => prev - 1);
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
setIsSubmitting(true);
|
|
||||||
// Simular um chamado de API
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
||||||
|
|
||||||
notify.success(
|
|
||||||
"Candidatura enviada com sucesso!",
|
|
||||||
`Boa sorte! Sua candidatura para ${job.title} foi recebida.`
|
|
||||||
);
|
|
||||||
|
|
||||||
router.push("/dashboard/candidato/candidaturas");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSaveDraft = () => {
|
|
||||||
notify.info(
|
|
||||||
"Rascunho salvo",
|
|
||||||
"Você pode continuar sua candidatura mais tarde."
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const progress = (currentStep / steps.length) * 100;
|
|
||||||
|
|
||||||
if (!job) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex flex-col bg-muted/30">
|
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
<main className="flex-1 py-8">
|
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="mb-8">
|
|
||||||
<Link
|
|
||||||
href={`/vagas/${id}`}
|
|
||||||
className="inline-flex items-center text-sm text-muted-foreground hover:text-primary mb-4 transition-colors"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
||||||
Voltar para detalhes da vaga
|
|
||||||
</Link>
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl md:text-3xl font-bold text-foreground">
|
|
||||||
Candidatura: {job.title}
|
|
||||||
</h1>
|
|
||||||
<p className="text-muted-foreground mt-1">
|
|
||||||
{job.company} • {job.location}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm font-medium bg-primary/10 text-primary px-3 py-1 rounded-full self-start md:self-center">
|
|
||||||
Tempo estimado: 5 min
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Progresso das etapas */}
|
|
||||||
<div className="mb-8">
|
|
||||||
<div className="flex justify-between mb-2">
|
|
||||||
<span className="text-sm font-medium text-muted-foreground">
|
|
||||||
Etapa {currentStep} de {steps.length}:{" "}
|
|
||||||
<span className="text-foreground">
|
|
||||||
{steps[currentStep - 1].title}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-medium text-primary">
|
|
||||||
{Math.round(progress)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Progress value={progress} className="h-2" />
|
|
||||||
|
|
||||||
{/* Indicador de etapas (DESKTOP) */}
|
|
||||||
<div className="hidden md:flex justify-between mt-4 px-2">
|
|
||||||
{steps.map((step) => {
|
|
||||||
const Icon = step.icon;
|
|
||||||
const isActive = step.id === currentStep;
|
|
||||||
const isCompleted = step.id < currentStep;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={step.id}
|
|
||||||
className={`flex flex-col items-center gap-2 ${isActive
|
|
||||||
? "text-primary"
|
|
||||||
: isCompleted
|
|
||||||
? "text-primary/60"
|
|
||||||
: "text-muted-foreground"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`
|
|
||||||
w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors
|
|
||||||
${isActive
|
|
||||||
? "border-primary bg-primary text-primary-foreground"
|
|
||||||
: isCompleted
|
|
||||||
? "border-primary bg-primary/10 text-primary"
|
|
||||||
: "border-muted-foreground/30 bg-background"
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
{isCompleted ? (
|
|
||||||
<CheckCircle2 className="h-5 w-5" />
|
|
||||||
) : (
|
|
||||||
<Icon className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span className="text-xs font-medium">{step.title}</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Conteúdo do formulário */}
|
|
||||||
<div className="grid gap-6">
|
|
||||||
<AnimatePresence mode="wait">
|
|
||||||
<motion.div
|
|
||||||
key={currentStep}
|
|
||||||
initial={{ opacity: 0, x: 20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
exit={{ opacity: 0, x: -20 }}
|
|
||||||
transition={{ duration: 0.3 }}
|
|
||||||
>
|
|
||||||
<Card className="border-t-4 border-t-primary">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>{steps[currentStep - 1].title}</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Preencha as informações abaixo para continuar.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent className="space-y-6">
|
|
||||||
{/* Etapa 1: Dados Pessoais */}
|
|
||||||
{currentStep === 1 && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="fullName">Nome Completo *</Label>
|
|
||||||
<Input
|
|
||||||
id="fullName"
|
|
||||||
placeholder="Seu nome completo"
|
|
||||||
value={formData.fullName}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("fullName", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="email">E-mail *</Label>
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
placeholder="seu@email.com"
|
|
||||||
value={formData.email}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("email", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid md:grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="phone">Telefone / WhatsApp *</Label>
|
|
||||||
<Input
|
|
||||||
id="phone"
|
|
||||||
placeholder="(00) 00000-0000"
|
|
||||||
value={formData.phone}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("phone", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="linkedin">LinkedIn (URL)</Label>
|
|
||||||
<Input
|
|
||||||
id="linkedin"
|
|
||||||
placeholder="linkedin.com/in/seu-perfil"
|
|
||||||
value={formData.linkedin}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("linkedin", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-2 pt-4">
|
|
||||||
<Checkbox
|
|
||||||
id="privacy"
|
|
||||||
checked={formData.privacyAccepted}
|
|
||||||
onCheckedChange={(checked) =>
|
|
||||||
handleInputChange("privacyAccepted", checked)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
htmlFor="privacy"
|
|
||||||
className="text-sm font-normal text-muted-foreground"
|
|
||||||
>
|
|
||||||
Li e concordo com a{" "}
|
|
||||||
<a href="#" className="text-primary underline">
|
|
||||||
Política de Privacidade
|
|
||||||
</a>{" "}
|
|
||||||
e autorizo o tratamento dos meus dados para fins de
|
|
||||||
recrutamento.
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Etapa 2: Dccumentos */}
|
|
||||||
{currentStep === 2 && (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Label>Currículo (CV) *</Label>
|
|
||||||
<div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center hover:bg-muted/50 transition-colors cursor-pointer">
|
|
||||||
<div className="flex flex-col items-center gap-2">
|
|
||||||
<div className="p-3 bg-primary/10 rounded-full text-primary">
|
|
||||||
<Upload className="h-6 w-6" />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-sm font-medium">
|
|
||||||
Clique para fazer upload ou arraste o arquivo
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
PDF, DOCX ou TXT (Máx. 5MB)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="portfolio">
|
|
||||||
Portfólio / Site Pessoal (Opcional)
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="portfolio"
|
|
||||||
placeholder="https://..."
|
|
||||||
value={formData.portfolioUrl}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("portfolioUrl", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="coverLetter">
|
|
||||||
Carta de Apresentação (Opcional)
|
|
||||||
</Label>
|
|
||||||
<Textarea
|
|
||||||
id="coverLetter"
|
|
||||||
placeholder="Escreva uma breve apresentação sobre você..."
|
|
||||||
className="min-h-[150px]"
|
|
||||||
value={formData.coverLetter}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("coverLetter", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Etapa 3: Experiências */}
|
|
||||||
{currentStep === 3 && (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="salary">Pretensão Salarial *</Label>
|
|
||||||
<Select
|
|
||||||
value={formData.salaryExpectation}
|
|
||||||
onValueChange={(val) =>
|
|
||||||
handleInputChange("salaryExpectation", val)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Selecione uma faixa" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="ate-3k">
|
|
||||||
Até R$ 3.000
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="3k-5k">
|
|
||||||
R$ 3.000 - R$ 5.000
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="5k-8k">
|
|
||||||
R$ 5.000 - R$ 8.000
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="8k-12k">
|
|
||||||
R$ 8.000 - R$ 12.000
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="12k-plus">
|
|
||||||
Acima de R$ 12.000
|
|
||||||
</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Label>
|
|
||||||
Você possui a experiência mínima requisitada para a
|
|
||||||
vaga? *
|
|
||||||
</Label>
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<div className="flex items-center space-x-2 border p-3 rounded-md flex-1 hover:bg-muted/50 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="experience"
|
|
||||||
id="exp-yes"
|
|
||||||
className="accent-primary h-4 w-4"
|
|
||||||
checked={formData.hasExperience === "yes"}
|
|
||||||
onChange={() =>
|
|
||||||
handleInputChange("hasExperience", "yes")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
htmlFor="exp-yes"
|
|
||||||
className="cursor-pointer flex-1"
|
|
||||||
>
|
|
||||||
Sim, possuo
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2 border p-3 rounded-md flex-1 hover:bg-muted/50 cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="experience"
|
|
||||||
id="exp-no"
|
|
||||||
className="accent-primary h-4 w-4"
|
|
||||||
checked={formData.hasExperience === "no"}
|
|
||||||
onChange={() =>
|
|
||||||
handleInputChange("hasExperience", "no")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
htmlFor="exp-no"
|
|
||||||
className="cursor-pointer flex-1"
|
|
||||||
>
|
|
||||||
Não possuo
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Etapa 4: Adicional */}
|
|
||||||
{currentStep === 4 && (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="whyUs">
|
|
||||||
Por que você quer trabalhar na {job.company}? *
|
|
||||||
</Label>
|
|
||||||
<Textarea
|
|
||||||
id="whyUs"
|
|
||||||
placeholder="Conte-nos o que te atrai na nossa empresa e nesta vaga..."
|
|
||||||
className="min-h-[150px]"
|
|
||||||
maxLength={1000}
|
|
||||||
value={formData.whyUs}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("whyUs", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<div className="text-xs text-right text-muted-foreground">
|
|
||||||
{formData.whyUs.length}/1000 caracteres
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<Label>Disponibilidade *</Label>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
{[
|
|
||||||
"Trabalho Presencial",
|
|
||||||
"Trabalho Remoto",
|
|
||||||
"Viagens",
|
|
||||||
"Início Imediato",
|
|
||||||
].map((item) => (
|
|
||||||
<div
|
|
||||||
key={item}
|
|
||||||
className="flex items-center space-x-2"
|
|
||||||
>
|
|
||||||
<Checkbox
|
|
||||||
id={`avail-${item}`}
|
|
||||||
checked={formData.availability.includes(item)}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
if (checked) {
|
|
||||||
handleInputChange("availability", [
|
|
||||||
...formData.availability,
|
|
||||||
item,
|
|
||||||
]);
|
|
||||||
} else {
|
|
||||||
handleInputChange(
|
|
||||||
"availability",
|
|
||||||
formData.availability.filter(
|
|
||||||
(i) => i !== item
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Label htmlFor={`avail-${item}`}>{item}</Label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
|
|
||||||
<CardFooter className="flex justify-between border-t pt-6">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleBack}
|
|
||||||
disabled={currentStep === 1 || isSubmitting}
|
|
||||||
>
|
|
||||||
<ChevronLeft className="mr-2 h-4 w-4" />
|
|
||||||
Voltar
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={handleSaveDraft}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="hidden sm:flex"
|
|
||||||
>
|
|
||||||
<Save className="mr-2 h-4 w-4" />
|
|
||||||
Salvar Rascunho
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={handleNext}
|
|
||||||
disabled={isSubmitting}
|
|
||||||
className="min-w-[120px]"
|
|
||||||
>
|
|
||||||
{isSubmitting ? (
|
|
||||||
"Enviando..."
|
|
||||||
) : currentStep === steps.length ? (
|
|
||||||
<>
|
|
||||||
Enviar Candidatura{" "}
|
|
||||||
<CheckCircle2 className="ml-2 h-4 w-4" />
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
Próxima Etapa{" "}
|
|
||||||
<ChevronRight className="ml-2 h-4 w-4" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,528 +1,10 @@
|
||||||
"use client";
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
import { use } from "react";
|
export default async function VagasJobRedirectPage({
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { Navbar } from "@/components/navbar";
|
|
||||||
import { Footer } from "@/components/footer";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/components/ui/card";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
||||||
import { Separator } from "@/components/ui/separator";
|
|
||||||
import { mockJobs } from "@/lib/mock-data";
|
|
||||||
import {
|
|
||||||
MapPin,
|
|
||||||
Briefcase,
|
|
||||||
DollarSign,
|
|
||||||
Calendar,
|
|
||||||
ArrowLeft,
|
|
||||||
CheckCircle2,
|
|
||||||
Building2,
|
|
||||||
Users,
|
|
||||||
Clock,
|
|
||||||
Heart,
|
|
||||||
Share2,
|
|
||||||
Bookmark,
|
|
||||||
Star,
|
|
||||||
Globe,
|
|
||||||
} from "lucide-react";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
|
|
||||||
|
|
||||||
export const runtime = 'edge';
|
|
||||||
|
|
||||||
export default function JobDetailPage({
|
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
params: Promise<{ id: string }>;
|
params: Promise<{ id: string }>;
|
||||||
}) {
|
}) {
|
||||||
const { id } = use(params);
|
const { id } = await params;
|
||||||
const router = useRouter();
|
redirect(`/jobs/${id}`);
|
||||||
const [isFavorited, setIsFavorited] = useState(false);
|
|
||||||
const [isBookmarked, setIsBookmarked] = useState(false);
|
|
||||||
|
|
||||||
const job = mockJobs.find((j) => j.id === id);
|
|
||||||
|
|
||||||
if (!job) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex flex-col">
|
|
||||||
<Navbar />
|
|
||||||
<main className="flex-1 flex items-center justify-center">
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
className="text-center max-w-md mx-auto p-6"
|
|
||||||
>
|
|
||||||
<div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
|
|
||||||
<Briefcase className="w-8 h-8 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
<h1 className="text-2xl font-bold mb-2">Vaga não encontrada</h1>
|
|
||||||
<p className="text-muted-foreground mb-6">
|
|
||||||
A vaga que você está procurando não existe ou foi removida.
|
|
||||||
</p>
|
|
||||||
<Link href="/vagas">
|
|
||||||
<Button>Ver todas as vagas</Button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCompanyInitials = (company: string) => {
|
|
||||||
return company
|
|
||||||
.split(" ")
|
|
||||||
.map((word) => word[0])
|
|
||||||
.join("")
|
|
||||||
.toUpperCase()
|
|
||||||
.slice(0, 2);
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatTimeAgo = (dateString: string) => {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
const now = new Date();
|
|
||||||
const diffInMs = now.getTime() - date.getTime();
|
|
||||||
const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
|
|
||||||
|
|
||||||
if (diffInDays === 0) return "Hoje";
|
|
||||||
if (diffInDays === 1) return "Ontem";
|
|
||||||
if (diffInDays < 7) return `${diffInDays} dias atrás`;
|
|
||||||
if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} semanas atrás`;
|
|
||||||
return `${Math.floor(diffInDays / 30)} meses atrás`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTypeLabel = (type: string) => {
|
|
||||||
const typeLabels: { [key: string]: string } = {
|
|
||||||
"full-time": "Tempo integral",
|
|
||||||
"part-time": "Meio período",
|
|
||||||
contract: "Contrato",
|
|
||||||
Remoto: "Remoto",
|
|
||||||
};
|
|
||||||
return typeLabels[type] || type;
|
|
||||||
};
|
|
||||||
|
|
||||||
const mockCompanyInfo = {
|
|
||||||
size: "100-500 funcionários",
|
|
||||||
industry: "Tecnologia",
|
|
||||||
founded: "2015",
|
|
||||||
website: "www.empresa.com",
|
|
||||||
rating: 4.5,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex flex-col">
|
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
<main className="flex-1 py-8">
|
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="max-w-5xl mx-auto">
|
|
||||||
{/* Breadcrumb */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: -20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
className="mb-6"
|
|
||||||
>
|
|
||||||
<Link href="/vagas">
|
|
||||||
<Button variant="ghost" className="gap-2 hover:bg-muted">
|
|
||||||
<ArrowLeft className="h-4 w-4" />
|
|
||||||
Voltar para vagas
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-3 gap-8">
|
|
||||||
{/* Main Content */}
|
|
||||||
<div className="lg:col-span-2 space-y-6">
|
|
||||||
{/* Job Header */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex flex-col sm:flex-row items-start gap-4">
|
|
||||||
<Avatar className="h-16 w-16 shrink-0">
|
|
||||||
<AvatarImage
|
|
||||||
src={`https://avatar.vercel.sh/${job.company}`}
|
|
||||||
alt={job.company}
|
|
||||||
/>
|
|
||||||
<AvatarFallback className="bg-primary/10 text-primary font-bold text-lg">
|
|
||||||
{getCompanyInitials(job.company)}
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
|
|
||||||
<div className="flex-1 w-full min-w-0">
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<div className="flex items-start justify-between gap-2">
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<CardTitle className="text-xl sm:text-2xl md:text-3xl mb-2 leading-tight">
|
|
||||||
{job.title}
|
|
||||||
</CardTitle>
|
|
||||||
<div className="flex flex-wrap items-center gap-2 mb-3">
|
|
||||||
<Building2 className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground shrink-0" />
|
|
||||||
<CardDescription className="text-base sm:text-lg font-medium">
|
|
||||||
{job.company}
|
|
||||||
</CardDescription>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
{mockCompanyInfo.rating}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden sm:flex gap-2 shrink-0">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setIsFavorited(!isFavorited)}
|
|
||||||
>
|
|
||||||
<Heart
|
|
||||||
className={`h-4 w-4 ${isFavorited
|
|
||||||
? "fill-red-500 text-red-500"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setIsBookmarked(!isBookmarked)}
|
|
||||||
>
|
|
||||||
<Bookmark
|
|
||||||
className={`h-4 w-4 ${isBookmarked ? "fill-current" : ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="icon">
|
|
||||||
<Share2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Action buttons mobile */}
|
|
||||||
<div className="flex sm:hidden gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setIsFavorited(!isFavorited)}
|
|
||||||
className="flex-1"
|
|
||||||
>
|
|
||||||
<Heart
|
|
||||||
className={`h-4 w-4 mr-1 ${isFavorited
|
|
||||||
? "fill-red-500 text-red-500"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{isFavorited ? "Favoritado" : "Favoritar"}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setIsBookmarked(!isBookmarked)}
|
|
||||||
className="flex-1"
|
|
||||||
>
|
|
||||||
<Bookmark
|
|
||||||
className={`h-4 w-4 mr-1 ${isBookmarked ? "fill-current" : ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{isBookmarked ? "Salvo" : "Salvar"}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
className="shrink-0"
|
|
||||||
>
|
|
||||||
<Share2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Job Meta */}
|
|
||||||
<div className="flex flex-wrap gap-3 sm:gap-4 text-sm text-muted-foreground">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<MapPin className="h-4 w-4 shrink-0" />
|
|
||||||
<span className="truncate">{job.location}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Briefcase className="h-4 w-4 shrink-0" />
|
|
||||||
<Badge
|
|
||||||
variant="secondary"
|
|
||||||
className="whitespace-nowrap"
|
|
||||||
>
|
|
||||||
{getTypeLabel(job.type)}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
{job.salary && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<DollarSign className="h-4 w-4 shrink-0" />
|
|
||||||
<span className="font-medium text-foreground whitespace-nowrap">
|
|
||||||
{job.salary}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Clock className="h-4 w-4 shrink-0" />
|
|
||||||
<span className="whitespace-nowrap">
|
|
||||||
{formatTimeAgo(job.postedAt)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Apply Button - Mobile */}
|
|
||||||
<div className="lg:hidden pt-4">
|
|
||||||
<Link
|
|
||||||
href={`/vagas/${job.id}/candidatura`}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<Button size="lg" className="w-full cursor-pointer">
|
|
||||||
Candidatar-se
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Job Description */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1 }}
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-xl">Sobre a vaga</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="prose prose-sm max-w-none">
|
|
||||||
<p className="text-muted-foreground leading-relaxed whitespace-pre-line">
|
|
||||||
{job.description}
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Requirements */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.2 }}
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-xl">Requisitos</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-3">
|
|
||||||
{job.requirements.map((req, index) => (
|
|
||||||
<div key={index} className="flex items-start gap-3">
|
|
||||||
<CheckCircle2 className="h-5 w-5 text-primary mt-0.5 shrink-0" />
|
|
||||||
<span className="text-muted-foreground">{req}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Company Info */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.3 }}
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-xl">Sobre a empresa</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<p className="text-muted-foreground leading-relaxed">
|
|
||||||
{job.company} é uma empresa líder no mercado,
|
|
||||||
comprometida em criar um ambiente de trabalho inclusivo
|
|
||||||
e inovador. Oferecemos benefícios competitivos e
|
|
||||||
oportunidades de crescimento profissional.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4 border-t">
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
|
||||||
<Users className="h-4 w-4 shrink-0" />
|
|
||||||
<span>Tamanho</span>
|
|
||||||
</div>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{mockCompanyInfo.size}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
|
||||||
<Building2 className="h-4 w-4 shrink-0" />
|
|
||||||
<span>Setor</span>
|
|
||||||
</div>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{mockCompanyInfo.industry}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
|
||||||
<Calendar className="h-4 w-4 shrink-0" />
|
|
||||||
<span>Fundada</span>
|
|
||||||
</div>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
{mockCompanyInfo.founded}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
|
|
||||||
<Globe className="h-4 w-4 shrink-0" />
|
|
||||||
<span>Website</span>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href={`https://${mockCompanyInfo.website}`}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="font-medium text-sm text-primary hover:underline break-all"
|
|
||||||
>
|
|
||||||
{mockCompanyInfo.website}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sidebar */}
|
|
||||||
<div className="space-y-6 lg:sticky lg:top-20 lg:self-start">
|
|
||||||
{/* Apply Card - Desktop */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
className="hidden lg:block"
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-lg">
|
|
||||||
Interessado na vaga?
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Candidate-se agora e faça parte da nossa equipe!
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<Link
|
|
||||||
href={`/vagas/${job.id}/candidatura`}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<Button size="lg" className="w-full cursor-pointer">
|
|
||||||
Candidatar-se
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
<div className="space-y-3 text-sm">
|
|
||||||
<div className="flex items-start justify-between gap-2">
|
|
||||||
<span className="text-muted-foreground">
|
|
||||||
Tipo de vaga:
|
|
||||||
</span>
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
className="whitespace-nowrap"
|
|
||||||
>
|
|
||||||
{getTypeLabel(job.type)}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-start justify-between gap-2">
|
|
||||||
<span className="text-muted-foreground shrink-0">
|
|
||||||
Localização:
|
|
||||||
</span>
|
|
||||||
<span className="font-medium text-right">
|
|
||||||
{job.location}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{job.salary && (
|
|
||||||
<div className="flex items-start justify-between gap-2">
|
|
||||||
<span className="text-muted-foreground">
|
|
||||||
Salário:
|
|
||||||
</span>
|
|
||||||
<span className="font-medium text-right whitespace-nowrap">
|
|
||||||
{job.salary}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="flex items-start justify-between gap-2">
|
|
||||||
<span className="text-muted-foreground">
|
|
||||||
Publicado:
|
|
||||||
</span>
|
|
||||||
<span className="font-medium text-right whitespace-nowrap">
|
|
||||||
{formatTimeAgo(job.postedAt)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Similar Jobs */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: 20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ delay: 0.2 }}
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-lg">Vagas similares</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
{mockJobs
|
|
||||||
.filter((j) => j.id !== job.id)
|
|
||||||
.slice(0, 3)
|
|
||||||
.map((similarJob) => (
|
|
||||||
<Link
|
|
||||||
key={similarJob.id}
|
|
||||||
href={`/vagas/${similarJob.id}`}
|
|
||||||
>
|
|
||||||
<div className="p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer">
|
|
||||||
<h4 className="font-medium text-sm mb-1 line-clamp-1">
|
|
||||||
{similarJob.title}
|
|
||||||
</h4>
|
|
||||||
<p className="text-xs text-muted-foreground mb-2">
|
|
||||||
{similarJob.company}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
||||||
<MapPin className="h-3 w-3" />
|
|
||||||
<span>{similarJob.location}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
<Link href="/vagas">
|
|
||||||
<Button variant="outline" size="sm" className="w-full">
|
|
||||||
Ver todas as vagas
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,463 +1,5 @@
|
||||||
"use client"
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
import { useSearchParams } from "next/navigation"
|
export default function VagasRedirectPage() {
|
||||||
|
redirect("/jobs");
|
||||||
import { useEffect, useState, useMemo, Suspense } from "react"
|
|
||||||
import { Navbar } from "@/components/navbar"
|
|
||||||
import { Footer } from "@/components/footer"
|
|
||||||
import { JobCard } from "@/components/job-card"
|
|
||||||
import { Input } from "@/components/ui/input"
|
|
||||||
import { Button } from "@/components/ui/button"
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
||||||
import { Badge } from "@/components/ui/badge"
|
|
||||||
import { Card, CardContent } from "@/components/ui/card"
|
|
||||||
import { PageSkeleton } from "@/components/loading-skeletons"
|
|
||||||
import { mockJobs } from "@/lib/mock-data"
|
|
||||||
import { jobsApi, transformApiJobToFrontend } from "@/lib/api"
|
|
||||||
import { useDebounce } from "@/hooks/use-utils"
|
|
||||||
import { useTranslation } from "@/lib/i18n"
|
|
||||||
import { Search, MapPin, Briefcase, SlidersHorizontal, X, ArrowUpDown } from "lucide-react"
|
|
||||||
import { motion, AnimatePresence } from "framer-motion"
|
|
||||||
import type { Job } from "@/lib/types"
|
|
||||||
|
|
||||||
function JobsContent() {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const [jobs, setJobs] = useState<Job[]>([])
|
|
||||||
const [loading, setLoading] = useState(true)
|
|
||||||
const [error, setError] = useState<string | null>(null)
|
|
||||||
const [searchTerm, setSearchTerm] = useState("")
|
|
||||||
const [locationFilter, setLocationFilter] = useState("all")
|
|
||||||
const [typeFilter, setTypeFilter] = useState("all")
|
|
||||||
const [workModeFilter, setWorkModeFilter] = useState("all")
|
|
||||||
const [sortBy, setSortBy] = useState("recent")
|
|
||||||
const [showFilters, setShowFilters] = useState(false)
|
|
||||||
|
|
||||||
const searchParams = useSearchParams()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const tech = searchParams.get("tech")
|
|
||||||
const q = searchParams.get("q")
|
|
||||||
const type = searchParams.get("type")
|
|
||||||
|
|
||||||
if (tech || q) {
|
|
||||||
setSearchTerm(tech || q || "")
|
|
||||||
setShowFilters(true) // Show filters if searching
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === "remoto") {
|
|
||||||
setWorkModeFilter("remote")
|
|
||||||
setShowFilters(true)
|
|
||||||
}
|
|
||||||
}, [searchParams])
|
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(1)
|
|
||||||
const ITEMS_PER_PAGE = 10
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let isMounted = true
|
|
||||||
|
|
||||||
const fetchJobs = async () => {
|
|
||||||
setLoading(true)
|
|
||||||
setError(null)
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Fetch many jobs to allow client-side filtering and pagination
|
|
||||||
const response = await jobsApi.list({ limit: 1000, page: 1 })
|
|
||||||
const mappedJobs = response.data.map(transformApiJobToFrontend)
|
|
||||||
|
|
||||||
if (isMounted) {
|
|
||||||
setJobs(mappedJobs)
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Erro ao buscar vagas", err)
|
|
||||||
if (isMounted) {
|
|
||||||
setError(t('jobs.error'))
|
|
||||||
setJobs(mockJobs)
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (isMounted) {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchJobs()
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isMounted = false
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Debounce search term para otimizar performance
|
|
||||||
const debouncedSearchTerm = useDebounce(searchTerm, 300)
|
|
||||||
|
|
||||||
// Reset page when filters change
|
|
||||||
useEffect(() => {
|
|
||||||
setCurrentPage(1)
|
|
||||||
}, [debouncedSearchTerm, locationFilter, typeFilter, workModeFilter, sortBy])
|
|
||||||
|
|
||||||
// Extrair valores únicos para os filtros
|
|
||||||
const uniqueLocations = useMemo(() => {
|
|
||||||
const locations = jobs.map(job => job.location)
|
|
||||||
return Array.from(new Set(locations))
|
|
||||||
}, [jobs])
|
|
||||||
|
|
||||||
const uniqueTypes = useMemo(() => {
|
|
||||||
const types = jobs.map(job => job.type)
|
|
||||||
return Array.from(new Set(types))
|
|
||||||
}, [jobs])
|
|
||||||
|
|
||||||
const uniqueWorkModes = useMemo(() => {
|
|
||||||
const modes = jobs.map(job => job.workMode).filter(Boolean) as string[]
|
|
||||||
return Array.from(new Set(modes))
|
|
||||||
}, [jobs])
|
|
||||||
|
|
||||||
const filteredAndSortedJobs = useMemo(() => {
|
|
||||||
let filtered = jobs.filter((job) => {
|
|
||||||
const matchesSearch =
|
|
||||||
job.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
|
||||||
job.company.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
|
|
||||||
job.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
|
|
||||||
const matchesLocation = locationFilter === "all" || job.location.includes(locationFilter)
|
|
||||||
const matchesType = typeFilter === "all" || job.type === typeFilter
|
|
||||||
const matchesWorkMode = workModeFilter === "all" || job.workMode === workModeFilter
|
|
||||||
|
|
||||||
return matchesSearch && matchesLocation && matchesType && matchesWorkMode
|
|
||||||
})
|
|
||||||
|
|
||||||
// Ordenação
|
|
||||||
switch (sortBy) {
|
|
||||||
case "recent":
|
|
||||||
filtered.sort((a, b) => new Date(b.postedAt).getTime() - new Date(a.postedAt).getTime())
|
|
||||||
break
|
|
||||||
case "title":
|
|
||||||
filtered.sort((a, b) => a.title.localeCompare(b.title))
|
|
||||||
break
|
|
||||||
case "company":
|
|
||||||
filtered.sort((a, b) => a.company.localeCompare(b.company))
|
|
||||||
break
|
|
||||||
case "location":
|
|
||||||
filtered.sort((a, b) => a.location.localeCompare(b.location))
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered
|
|
||||||
}, [debouncedSearchTerm, locationFilter, typeFilter, workModeFilter, sortBy, jobs])
|
|
||||||
|
|
||||||
// Pagination Logic
|
|
||||||
const totalPages = Math.ceil(filteredAndSortedJobs.length / ITEMS_PER_PAGE)
|
|
||||||
const paginatedJobs = filteredAndSortedJobs.slice(
|
|
||||||
(currentPage - 1) * ITEMS_PER_PAGE,
|
|
||||||
currentPage * ITEMS_PER_PAGE
|
|
||||||
)
|
|
||||||
|
|
||||||
const hasActiveFilters = searchTerm || locationFilter !== "all" || typeFilter !== "all" || workModeFilter !== "all"
|
|
||||||
|
|
||||||
const clearFilters = () => {
|
|
||||||
setSearchTerm("")
|
|
||||||
setLocationFilter("all")
|
|
||||||
setTypeFilter("all")
|
|
||||||
setWorkModeFilter("all")
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Hero Section */}
|
|
||||||
<section className="bg-gradient-to-br from-primary/10 via-primary/5 to-transparent py-12 md:py-16">
|
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="max-w-3xl mx-auto text-center">
|
|
||||||
<motion.h1
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
className="text-4xl md:text-5xl font-bold text-foreground mb-4 text-balance"
|
|
||||||
>
|
|
||||||
{t('jobs.title')}
|
|
||||||
</motion.h1>
|
|
||||||
<motion.p
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.1 }}
|
|
||||||
className="text-lg text-muted-foreground text-pretty"
|
|
||||||
>
|
|
||||||
{loading ? t('jobs.loading') : t('jobs.subtitle', { count: jobs.length })}
|
|
||||||
</motion.p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Search and Filters Section */}
|
|
||||||
<section className="py-8 border-b bg-background/50">
|
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="max-w-5xl mx-auto space-y-4">
|
|
||||||
{/* Main Search Bar */}
|
|
||||||
<div className="flex flex-col lg:flex-row gap-4">
|
|
||||||
<div className="flex-1 relative">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder={t('jobs.search')}
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="pl-10 h-12"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setShowFilters(!showFilters)}
|
|
||||||
className="h-12 gap-2"
|
|
||||||
>
|
|
||||||
<SlidersHorizontal className="h-4 w-4" />
|
|
||||||
{t('jobs.filters.toggle')}
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<Badge variant="secondary" className="ml-1 px-1 py-0 text-xs">
|
|
||||||
!
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Advanced Filters */}
|
|
||||||
<AnimatePresence>
|
|
||||||
{showFilters && (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, height: 0 }}
|
|
||||||
animate={{ opacity: 1, height: "auto" }}
|
|
||||||
exit={{ opacity: 0, height: 0 }}
|
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
>
|
|
||||||
<Card>
|
|
||||||
<CardContent className="p-4">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
||||||
<Select value={locationFilter} onValueChange={setLocationFilter}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<MapPin className="h-4 w-4 mr-2" />
|
|
||||||
<SelectValue placeholder={t('jobs.filters.location')} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
|
||||||
{uniqueLocations.map((location) => (
|
|
||||||
<SelectItem key={location} value={location}>
|
|
||||||
{location}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<Briefcase className="h-4 w-4 mr-2" />
|
|
||||||
<SelectValue placeholder={t('jobs.filters.type')} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
|
||||||
{uniqueTypes.map((type) => (
|
|
||||||
<SelectItem key={type} value={type}>
|
|
||||||
{type === "full-time" ? "Tempo integral" :
|
|
||||||
type === "part-time" ? "Meio período" :
|
|
||||||
type === "contract" ? "Contrato" : type}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select value={workModeFilter} onValueChange={setWorkModeFilter}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<MapPin className="h-4 w-4 mr-2" />
|
|
||||||
<SelectValue placeholder={t('jobs.filters.workMode')} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
|
||||||
{uniqueWorkModes.map((mode) => (
|
|
||||||
<SelectItem key={mode} value={mode}>
|
|
||||||
{mode === "remote" ? t('workMode.remote') :
|
|
||||||
mode === "hybrid" ? t('workMode.hybrid') :
|
|
||||||
mode === "onsite" ? t('workMode.onsite') : mode}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select value={sortBy} onValueChange={setSortBy}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<ArrowUpDown className="h-4 w-4 mr-2" />
|
|
||||||
<SelectValue placeholder={t('jobs.filters.order')} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="recent">{t('jobs.sort.recent')}</SelectItem>
|
|
||||||
<SelectItem value="title">{t('jobs.sort.title')}</SelectItem>
|
|
||||||
<SelectItem value="company">{t('jobs.sort.company')}</SelectItem>
|
|
||||||
<SelectItem value="location">{t('jobs.sort.location')}</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={clearFilters}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
{t('jobs.reset')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
|
|
||||||
{/* Results Summary */}
|
|
||||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
|
||||||
<span>
|
|
||||||
{t('jobs.pagination.showing', {
|
|
||||||
from: (currentPage - 1) * ITEMS_PER_PAGE + 1,
|
|
||||||
to: Math.min(currentPage * ITEMS_PER_PAGE, filteredAndSortedJobs.length),
|
|
||||||
total: filteredAndSortedJobs.length
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span>Filtros ativos:</span>
|
|
||||||
{searchTerm && (
|
|
||||||
<Badge variant="secondary" className="gap-1">
|
|
||||||
"{searchTerm}"
|
|
||||||
<button onClick={() => setSearchTerm("")} className="ml-1">
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
{locationFilter !== "all" && (
|
|
||||||
<Badge variant="secondary" className="gap-1">
|
|
||||||
{locationFilter}
|
|
||||||
<button onClick={() => setLocationFilter("all")} className="ml-1">
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
{typeFilter !== "all" && (
|
|
||||||
<Badge variant="secondary" className="gap-1">
|
|
||||||
{typeFilter}
|
|
||||||
<button onClick={() => setTypeFilter("all")} className="ml-1">
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
{workModeFilter !== "all" && (
|
|
||||||
<Badge variant="secondary" className="gap-1">
|
|
||||||
{workModeFilter === "remote" ? "Remoto" :
|
|
||||||
workModeFilter === "hybrid" ? "Híbrido" :
|
|
||||||
workModeFilter === "onsite" ? "Presencial" : workModeFilter}
|
|
||||||
<button onClick={() => setWorkModeFilter("all")} className="ml-1">
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Jobs Grid */}
|
|
||||||
<section className="py-12">
|
|
||||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div className="max-w-5xl mx-auto">
|
|
||||||
{error && (
|
|
||||||
<div className="mb-6 p-4 bg-amber-50 text-amber-900 rounded-lg border border-amber-200">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="text-center text-muted-foreground">{t('jobs.loading')}</div>
|
|
||||||
) : paginatedJobs.length > 0 ? (
|
|
||||||
<div className="space-y-8">
|
|
||||||
<motion.div layout className="grid gap-6">
|
|
||||||
<AnimatePresence mode="popLayout">
|
|
||||||
{paginatedJobs.map((job, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={job.id}
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
exit={{ opacity: 0, y: -20 }}
|
|
||||||
transition={{ delay: index * 0.05 }}
|
|
||||||
layout
|
|
||||||
>
|
|
||||||
<JobCard job={job} />
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</AnimatePresence>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Pagination Controls */}
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="flex justify-center items-center gap-2 mt-8">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
>
|
|
||||||
{t('jobs.pagination.previous')}
|
|
||||||
</Button>
|
|
||||||
<div className="text-sm text-muted-foreground px-4">
|
|
||||||
{currentPage} / {totalPages}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
>
|
|
||||||
{t('jobs.pagination.next')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
className="text-center py-12"
|
|
||||||
>
|
|
||||||
<div className="max-w-md mx-auto">
|
|
||||||
<Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
||||||
<h3 className="text-lg font-semibold mb-2">{t('jobs.noResults.title')}</h3>
|
|
||||||
<p className="text-muted-foreground mb-4">
|
|
||||||
{t('jobs.noResults.desc')}
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={clearFilters}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
{t('jobs.resetFilters')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function VagasPage() {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex flex-col">
|
|
||||||
<Navbar />
|
|
||||||
<main className="flex-1">
|
|
||||||
<Suspense fallback={<PageSkeleton />}>
|
|
||||||
<JobsContent />
|
|
||||||
</Suspense>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,22 +24,22 @@ export function Footer() {
|
||||||
<h3 className="font-semibold mb-4">{t('footer.jobsByTech')}</h3>
|
<h3 className="font-semibold mb-4">{t('footer.jobsByTech')}</h3>
|
||||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||||
<li>
|
<li>
|
||||||
<Link href="/vagas?tech=python" className="hover:text-foreground transition-colors">
|
<Link href="/jobs?tech=python" className="hover:text-foreground transition-colors">
|
||||||
Desenvolvedor Python
|
Desenvolvedor Python
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/vagas?tech=react" className="hover:text-foreground transition-colors">
|
<Link href="/jobs?tech=react" className="hover:text-foreground transition-colors">
|
||||||
Desenvolvedor React
|
Desenvolvedor React
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/vagas?tech=dados" className="hover:text-foreground transition-colors">
|
<Link href="/jobs?tech=dados" className="hover:text-foreground transition-colors">
|
||||||
Analista de Dados
|
Analista de Dados
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/vagas?type=remoto" className="hover:text-foreground transition-colors">
|
<Link href="/jobs?type=remoto" className="hover:text-foreground transition-colors">
|
||||||
{t('workMode.remote')}
|
{t('workMode.remote')}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -60,7 +60,7 @@ export function Footer() {
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/vagas" className="hover:text-foreground transition-colors">
|
<Link href="/jobs" className="hover:text-foreground transition-colors">
|
||||||
{t('nav.jobs')}
|
{t('nav.jobs')}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -196,12 +196,12 @@ export function JobCard({ job }: JobCardProps) {
|
||||||
|
|
||||||
<CardFooter className="pt-4 border-t">
|
<CardFooter className="pt-4 border-t">
|
||||||
<div className="flex gap-2 w-full">
|
<div className="flex gap-2 w-full">
|
||||||
<Link href={`/vagas/${job.id}`} className="flex-1">
|
<Link href={`/jobs/${job.id}`} className="flex-1">
|
||||||
<Button variant="outline" className="w-full cursor-pointer">
|
<Button variant="outline" className="w-full cursor-pointer">
|
||||||
{t('jobs.card.viewDetails')}
|
{t('jobs.card.viewDetails')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={`/vagas/${job.id}/candidatura`} className="flex-1">
|
<Link href={`/jobs/${job.id}/candidatura`} className="flex-1">
|
||||||
<Button className="w-full cursor-pointer">{t('jobs.card.apply')}</Button>
|
<Button className="w-full cursor-pointer">{t('jobs.card.apply')}</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ export function Navbar() {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const navigationItems = [
|
const navigationItems = [
|
||||||
{ href: "/vagas", label: t('nav.jobs') },
|
{ href: "/jobs", label: t('nav.jobs') },
|
||||||
{ href: "/sobre", label: t('nav.about') },
|
{ href: "/sobre", label: t('nav.about') },
|
||||||
{ href: "/contato", label: t('nav.contact') },
|
{ href: "/contato", label: t('nav.contact') },
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue