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 |
|
||||
|------|-----------|--------|
|
||||
| `/` | Landing page | Público |
|
||||
| `/vagas` | Listagem de vagas | Público |
|
||||
| `/jobs` | Listagem de vagas | Público |
|
||||
| `/login` | Autenticação | Público |
|
||||
| `/dashboard/admin` | Painel admin | SuperAdmin |
|
||||
| `/dashboard/empresa` | Painel empresa | CompanyAdmin, Recruiter |
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://gohorsejobs.com/vagas</loc>
|
||||
<loc>https://gohorsejobs.com/jobs</loc>
|
||||
<lastmod>2025-12-14</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.9</priority>
|
||||
|
|
@ -28,25 +28,25 @@
|
|||
|
||||
<!-- Vagas por Tecnologia -->
|
||||
<url>
|
||||
<loc>https://gohorsejobs.com/vagas?tech=python</loc>
|
||||
<loc>https://gohorsejobs.com/jobs?tech=python</loc>
|
||||
<lastmod>2025-12-14</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://gohorsejobs.com/vagas?tech=react</loc>
|
||||
<loc>https://gohorsejobs.com/jobs?tech=react</loc>
|
||||
<lastmod>2025-12-14</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://gohorsejobs.com/vagas?tech=nodejs</loc>
|
||||
<loc>https://gohorsejobs.com/jobs?tech=nodejs</loc>
|
||||
<lastmod>2025-12-14</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://gohorsejobs.com/vagas?tech=dados</loc>
|
||||
<loc>https://gohorsejobs.com/jobs?tech=dados</loc>
|
||||
<lastmod>2025-12-14</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.8</priority>
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
|
||||
<!-- Vagas por Tipo -->
|
||||
<url>
|
||||
<loc>https://gohorsejobs.com/vagas?type=remoto</loc>
|
||||
<loc>https://gohorsejobs.com/jobs?type=remoto</loc>
|
||||
<lastmod>2025-12-14</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</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>
|
||||
<changefreq>daily</changefreq>
|
||||
<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";
|
||||
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({
|
||||
export default async function VagasJobApplicationRedirectPage({
|
||||
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={`/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>
|
||||
);
|
||||
}
|
||||
const { id } = await params;
|
||||
redirect(`/jobs/${id}/candidatura`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,528 +1,10 @@
|
|||
"use client";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
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({
|
||||
export default async function VagasJobRedirectPage({
|
||||
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="/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>
|
||||
);
|
||||
const { id } = await params;
|
||||
redirect(`/jobs/${id}`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,463 +1,5 @@
|
|||
"use client"
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
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>
|
||||
)
|
||||
export default function VagasRedirectPage() {
|
||||
redirect("/jobs");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,22 +24,22 @@ export function Footer() {
|
|||
<h3 className="font-semibold mb-4">{t('footer.jobsByTech')}</h3>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<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
|
||||
</Link>
|
||||
</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
|
||||
</Link>
|
||||
</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
|
||||
</Link>
|
||||
</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')}
|
||||
</Link>
|
||||
</li>
|
||||
|
|
@ -60,7 +60,7 @@ export function Footer() {
|
|||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/vagas" className="hover:text-foreground transition-colors">
|
||||
<Link href="/jobs" className="hover:text-foreground transition-colors">
|
||||
{t('nav.jobs')}
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -196,12 +196,12 @@ export function JobCard({ job }: JobCardProps) {
|
|||
|
||||
<CardFooter className="pt-4 border-t">
|
||||
<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">
|
||||
{t('jobs.card.viewDetails')}
|
||||
</Button>
|
||||
</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>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export function Navbar() {
|
|||
const { t } = useTranslation()
|
||||
|
||||
const navigationItems = [
|
||||
{ href: "/vagas", label: t('nav.jobs') },
|
||||
{ href: "/jobs", label: t('nav.jobs') },
|
||||
{ href: "/sobre", label: t('nav.about') },
|
||||
{ href: "/contato", label: t('nav.contact') },
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in a new issue