diff --git a/src/app/post-job/page.tsx b/src/app/post-job/page.tsx index 46c8693..38120f5 100644 --- a/src/app/post-job/page.tsx +++ b/src/app/post-job/page.tsx @@ -1,18 +1,19 @@ "use client"; -import { useState } from "react"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; import FooterBase from "@/components/sections/footer/FooterBase"; -import Input from "@/components/form/Input"; -import { Upload, CheckCircle, X } from "lucide-react"; +import { useState } from "react"; +import { Input } from "@/components/form/Input"; +import { Briefcase, Mail, CheckCircle, AlertCircle } from "lucide-react"; +import ButtonHoverBubble from "@/components/button/ButtonHoverBubble"; const navItems = [ { name: "Search Jobs", id: "/search" }, { name: "Post a Job", id: "/post-job" }, { name: "Admin", id: "admin-login" }, { name: "Browse", id: "/browse" }, - { name: "Contact", id: "contact" }, + { name: "Contact", id: "#contact" }, ]; const footerColumns = [ @@ -42,29 +43,37 @@ const footerColumns = [ }, ]; -interface FormData { - jobTitle: string; - companyName: string; - location: string; - jobType: string; - salary: string; - description: string; - requirements: string; - benefits: string; - contactEmail: string; +interface FormErrors { + jobTitle?: string; + company?: string; + location?: string; + salary?: string; + description?: string; + requirements?: string; + email?: string; } -interface FormErrors { - [key: string]: string; +interface FormData { + jobTitle: string; + company: string; + location: string; + salary: string; + jobType: string; + description: string; + requirements: string; + email: string; + contactPhone?: string; } export default function PostJobPage() { const [formData, setFormData] = useState({ - jobTitle: "", companyName: "", location: "", jobType: "Full-time", salary: "", description: "", requirements: "", benefits: "", contactEmail: ""}); + jobTitle: "", company: "", location: "", salary: "", jobType: "Full-time", description: "", requirements: "", email: "", contactPhone: ""}); const [errors, setErrors] = useState({}); - const [submitted, setSubmitted] = useState(false); - const [isLoading, setIsLoading] = useState(false); + const [isSubmitting, setIsSubmitting] = useState(false); + const [submitStatus, setSubmitStatus] = useState< + "idle" | "success" | "error" + >("idle"); const validateForm = (): boolean => { const newErrors: FormErrors = {}; @@ -72,8 +81,8 @@ export default function PostJobPage() { if (!formData.jobTitle.trim()) { newErrors.jobTitle = "Job title is required"; } - if (!formData.companyName.trim()) { - newErrors.companyName = "Company name is required"; + if (!formData.company.trim()) { + newErrors.company = "Company name is required"; } if (!formData.location.trim()) { newErrors.location = "Location is required"; @@ -81,48 +90,60 @@ export default function PostJobPage() { if (!formData.salary.trim()) { newErrors.salary = "Salary range is required"; } - if (!formData.description.trim() || formData.description.trim().length < 20) { - newErrors.description = "Job description must be at least 20 characters"; + if (formData.description.trim().length < 20) { + newErrors.description = "Description must be at least 20 characters"; } - if (!formData.requirements.trim() || formData.requirements.trim().length < 20) { - newErrors.requirements = "Requirements must be at least 20 characters"; + if (formData.requirements.trim().length < 10) { + newErrors.requirements = "Requirements must be at least 10 characters"; } - if (!formData.contactEmail.trim()) { - newErrors.contactEmail = "Contact email is required"; - } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.contactEmail)) { - newErrors.contactEmail = "Please enter a valid email address"; + if (!formData.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { + newErrors.email = "Valid email is required"; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; - const handleInputChange = (field: keyof FormData, value: string) => { - setFormData((prev) => ({ ...prev, [field]: value })); - if (errors[field]) { - setErrors((prev) => { - const newErrors = { ...prev }; - delete newErrors[field]; - return newErrors; - }); + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!validateForm()) { + setSubmitStatus("error"); + return; + } + + setIsSubmitting(true); + setSubmitStatus("idle"); + + try { + // Simulate API call + await new Promise((resolve) => setTimeout(resolve, 1500)); + setSubmitStatus("success"); + setFormData({ + jobTitle: "", company: "", location: "", salary: "", jobType: "Full-time", description: "", requirements: "", email: "", contactPhone: ""}); + setErrors({}); + + // Reset success message after 5 seconds + setTimeout(() => setSubmitStatus("idle"), 5000); + } catch (error) { + setSubmitStatus("error"); + } finally { + setIsSubmitting(false); } }; - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - if (!validateForm()) return; - - setIsLoading(true); - try { - await new Promise((resolve) => setTimeout(resolve, 2000)); - setSubmitted(true); - setFormData({ - jobTitle: "", companyName: "", location: "", jobType: "Full-time", salary: "", description: "", requirements: "", benefits: "", contactEmail: ""}); - setTimeout(() => setSubmitted(false), 5000); - } catch (error) { - console.error("Submission error:", error); - } finally { - setIsLoading(false); + const handleInputChange = ( + e: React.ChangeEvent< + HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement + > + ) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + if (errors[name as keyof FormErrors]) { + setErrors((prev) => ({ + ...prev, + [name]: undefined, + })); } }; @@ -148,215 +169,251 @@ export default function PostJobPage() { /> -
-
+
+
{/* Header */}
-

- Post a Job +
+ + + Post a Job + +
+

+ Hire Top Talent in the Netherlands

-

- Reach thousands of qualified job seekers across the Netherlands +

+ Post your job opening and reach qualified candidates across all Dutch + provinces

- {/* Success Message */} - {submitted && ( -
- + {/* Status Messages */} + {submitStatus === "success" && ( +
+
-

Job posted successfully!

-

Your job listing will be live shortly.

+

Job Posted Successfully!

+

+ Your job listing is now live and visible to job seekers across the + Netherlands. +

-
)} - {/* Form */} + {submitStatus === "error" && Object.keys(errors).length > 0 && ( +
+ +
+

Validation Errors

+

+ Please correct the errors below and try again. +

+
+
+ )} + + {/* Job Form */}
{/* Job Title */} -
-