From 8e582cdfd59d201ffeeb28def0498623bf30b7bc Mon Sep 17 00:00:00 2001 From: bender Date: Sun, 8 Mar 2026 22:29:18 +0000 Subject: [PATCH] Update src/app/post-job/page.tsx --- src/app/post-job/page.tsx | 491 +++++++++++++++++++++++++++++++------- 1 file changed, 408 insertions(+), 83 deletions(-) diff --git a/src/app/post-job/page.tsx b/src/app/post-job/page.tsx index 3832d43..59848c6 100644 --- a/src/app/post-job/page.tsx +++ b/src/app/post-job/page.tsx @@ -2,46 +2,151 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; -import FeatureCardEight from "@/components/sections/feature/FeatureCardEight"; -import ContactCenter from "@/components/sections/contact/ContactCenter"; import FooterBase from "@/components/sections/footer/FooterBase"; -import { Sparkles, Mail } from "lucide-react"; +import { useState } from "react"; +import { Briefcase, Mail, CheckCircle, AlertCircle } from "lucide-react"; + +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" }, +]; + +const footerColumns = [ + { + title: "Product", items: [ + { label: "Search Jobs", href: "/search" }, + { label: "Post a Job", href: "/post-job" }, + { label: "Browse by Province", href: "#provinces" }, + { label: "For Employers", href: "#" }, + ], + }, + { + title: "Company", items: [ + { label: "About Jobee", href: "#about" }, + { label: "Careers", href: "#" }, + { label: "Contact Us", href: "#contact" }, + { label: "Blog", href: "#" }, + ], + }, + { + title: "Resources", items: [ + { label: "Privacy Policy", href: "#" }, + { label: "Terms of Service", href: "#" }, + { label: "FAQ", href: "#" }, + { label: "Support", href: "#" }, + ], + }, +]; + +interface FormErrors { + jobTitle?: string; + company?: string; + location?: string; + salary?: string; + description?: string; + requirements?: string; + email?: 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 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" }, - ]; + const [formData, setFormData] = useState({ + jobTitle: "", company: "", location: "", salary: "", jobType: "Full-time", description: "", requirements: "", email: "", contactPhone: ""}); - const footerColumns = [ - { - title: "Product", items: [ - { label: "Search Jobs", href: "/search" }, - { label: "Post a Job", href: "/post-job" }, - { label: "Browse by Province", href: "#provinces" }, - { label: "For Employers", href: "#" }, - ], - }, - { - title: "Company", items: [ - { label: "About Jobee", href: "#about" }, - { label: "Careers", href: "#" }, - { label: "Contact Us", href: "#contact" }, - { label: "Blog", href: "#" }, - ], - }, - { - title: "Resources", items: [ - { label: "Privacy Policy", href: "#" }, - { label: "Terms of Service", href: "#" }, - { label: "FAQ", href: "#" }, - { label: "Support", href: "#" }, - ], - }, - ]; + const [errors, setErrors] = useState({}); + const [isSubmitting, setIsSubmitting] = useState(false); + const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">( + "idle" + ); + + const validateForm = (): boolean => { + const newErrors: FormErrors = {}; + + if (!formData.jobTitle.trim()) { + newErrors.jobTitle = "Job title is required"; + } + if (!formData.company.trim()) { + newErrors.company = "Company name is required"; + } + if (!formData.location.trim()) { + newErrors.location = "Location is required"; + } + if (!formData.salary.trim()) { + newErrors.salary = "Salary range is required"; + } + if (formData.description.trim().length < 20) { + newErrors.description = "Description must be at least 20 characters"; + } + if (formData.requirements.trim().length < 10) { + newErrors.requirements = "Requirements must be at least 10 characters"; + } + 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 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 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, + })); + } + }; return ( -
- -
+
+
+ {/* Header */} +
+
+ + + Post a Job + +
+

+ Hire Top Talent in the Netherlands +

+

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

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

Job Posted Successfully!

+

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

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

Validation Errors

+

+ Please correct the errors below and try again. +

+
+
+ )} + + {/* Job Form */} +
+ {/* Job Title */} +
+ + + {errors.jobTitle && ( +

{errors.jobTitle}

+ )} +
+ + {/* Company Name */} +
+ + + {errors.company && ( +

{errors.company}

+ )} +
+ + {/* Location and Job Type */} +
+
+ + + {errors.location && ( +

{errors.location}

+ )} +
+
+ + +
+
+ + {/* Salary */} +
+ + + {errors.salary && ( +

{errors.salary}

+ )} +
+ + {/* Description */} +
+ +