From 46c8201b2ea45cdb2a2ec5ff3f9a5368da1df174 Mon Sep 17 00:00:00 2001 From: bender Date: Sun, 8 Mar 2026 22:12:39 +0000 Subject: [PATCH] Update src/app/post-job/page.tsx --- src/app/post-job/page.tsx | 415 ++++++++++++++++++++++++++++++-------- 1 file changed, 331 insertions(+), 84 deletions(-) diff --git a/src/app/post-job/page.tsx b/src/app/post-job/page.tsx index 15ac221..46c8693 100644 --- a/src/app/post-job/page.tsx +++ b/src/app/post-job/page.tsx @@ -1,48 +1,130 @@ "use client"; +import { useState } from "react"; 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 Link from "next/link"; -import { Briefcase, Mail, MapPin, Sparkles } from "lucide-react"; +import Input from "@/components/form/Input"; +import { Upload, CheckCircle, X } 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 FormData { + jobTitle: string; + companyName: string; + location: string; + jobType: string; + salary: string; + description: string; + requirements: string; + benefits: string; + contactEmail: string; +} + +interface FormErrors { + [key: string]: 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: "", companyName: "", location: "", jobType: "Full-time", salary: "", description: "", requirements: "", benefits: "", contactEmail: ""}); - 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 [submitted, setSubmitted] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + const validateForm = (): boolean => { + const newErrors: FormErrors = {}; + + if (!formData.jobTitle.trim()) { + newErrors.jobTitle = "Job title is required"; + } + if (!formData.companyName.trim()) { + newErrors.companyName = "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() || formData.description.trim().length < 20) { + newErrors.description = "Job 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.contactEmail.trim()) { + newErrors.contactEmail = "Contact email is required"; + } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.contactEmail)) { + newErrors.contactEmail = "Please enter a valid email address"; + } + + 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()) 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); + } + }; return ( -
- -
+
+
+ {/* Header */} +
+

+ Post a Job +

+

+ Reach thousands of qualified job seekers across the Netherlands +

+
-
- + {/* Success Message */} + {submitted && ( +
+ +
+

Job posted successfully!

+

Your job listing will be live shortly.

+
+ +
+ )} + + {/* Form */} +
+ {/* Job Title */} +
+ + handleInputChange("jobTitle", value)} + placeholder="e.g., Senior Software Engineer" + required + /> + {errors.jobTitle && ( +

{errors.jobTitle}

+ )} +
+ + {/* Company Name */} +
+ + handleInputChange("companyName", value)} + placeholder="Your company name" + required + /> + {errors.companyName && ( +

{errors.companyName}

+ )} +
+ + {/* Location */} +
+ + handleInputChange("location", value)} + placeholder="e.g., Amsterdam, Netherlands" + required + /> + {errors.location && ( +

{errors.location}

+ )} +
+ + {/* Job Type and Salary */} +
+
+ + +
+
+ + handleInputChange("salary", value)} + placeholder="e.g., €50,000 - €80,000" + required + /> + {errors.salary && ( +

{errors.salary}

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