diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 2b08dc4..a327c86 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,16 +1,15 @@ "use client"; +import { useState, useMemo } 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 { Sparkles, Mail } from "lucide-react"; +import { Search, ChevronDown, MapPin, DollarSign, Briefcase } from "lucide-react"; const navItems = [ - { name: "Search Jobs", id: "search" }, - { name: "Post a Job", id: "post-job" }, - { name: "Admin", id: "admin-login" }, + { 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" }, ]; @@ -42,7 +41,115 @@ const footerColumns = [ }, ]; +const mockJobs = [ + { + id: "1", title: "Senior Software Engineer", company: "TechCorp Amsterdam", location: "Amsterdam", province: "North Holland", salary: "€80,000 - €120,000", salaryMin: 80000, + salaryMax: 120000, + jobType: "Full-time", category: "Technology", description: + "Join our innovative team as a Senior Software Engineer. We\'re looking for experienced developers with expertise in React, Node.js, and cloud technologies.", logo: "http://img.b2bpic.net/free-vector/tech-company-logo_23-2148947635.jpg"}, + { + id: "2", title: "Marketing Manager", company: "Creative Solutions Rotterdam", location: "Rotterdam", province: "South Holland", salary: "€60,000 - €85,000", salaryMin: 60000, + salaryMax: 85000, + jobType: "Full-time", category: "Marketing", description: + "Lead our marketing initiatives and drive brand growth. We seek a strategic marketer with experience in digital marketing and campaign management.", logo: "http://img.b2bpic.net/free-vector/marketing-logo_23-2148947635.jpg"}, + { + id: "3", title: "Data Scientist", company: "Analytics Pro Utrecht", location: "Utrecht", province: "Utrecht", salary: "€70,000 - €110,000", salaryMin: 70000, + salaryMax: 110000, + jobType: "Full-time", category: "Data Science", description: + "Develop advanced analytics solutions for our global clients. Expertise in Python, machine learning, and big data technologies required.", logo: "http://img.b2bpic.net/free-vector/analytics-logo_23-2148947635.jpg"}, + { + id: "4", title: "UX/UI Designer", company: "Design Studios The Hague", location: "The Hague", province: "South Holland", salary: "€55,000 - €75,000", salaryMin: 55000, + salaryMax: 75000, + jobType: "Full-time", category: "Design", description: + "Create beautiful and intuitive user experiences for our web and mobile applications. Portfolio required.", logo: "http://img.b2bpic.net/free-vector/design-logo_23-2148947635.jpg"}, + { + id: "5", title: "Sales Executive", company: "Enterprise Solutions Groningen", location: "Groningen", province: "Groningen", salary: "€45,000 - €70,000", salaryMin: 45000, + salaryMax: 70000, + jobType: "Full-time", category: "Sales", description: + "Grow our sales pipeline and build strong client relationships. Commission and bonus structure available.", logo: "http://img.b2bpic.net/free-vector/sales-logo_23-2148947635.jpg"}, + { + id: "6", title: "HR Specialist", company: "People First Leiden", location: "Leiden", province: "South Holland", salary: "€50,000 - €65,000", salaryMin: 50000, + salaryMax: 65000, + jobType: "Part-time", category: "Human Resources", description: + "Support our HR team in recruitment, onboarding, and employee development initiatives.", logo: "http://img.b2bpic.net/free-vector/hr-logo_23-2148947635.jpg"}, + { + id: "7", title: "DevOps Engineer", company: "Cloud Innovations Eindhoven", location: "Eindhoven", province: "North Brabant", salary: "€75,000 - €105,000", salaryMin: 75000, + salaryMax: 105000, + jobType: "Full-time", category: "Technology", description: + "Manage and optimize our cloud infrastructure. Experience with Docker, Kubernetes, and CI/CD pipelines required.", logo: "http://img.b2bpic.net/free-vector/devops-logo_23-2148947635.jpg"}, + { + id: "8", title: "Product Manager", company: "Innovation Lab Delft", location: "Delft", province: "South Holland", salary: "€70,000 - €95,000", salaryMin: 70000, + salaryMax: 95000, + jobType: "Full-time", category: "Product", description: + "Lead product strategy and roadmap development for our SaaS platform. Experience with agile methodologies required.", logo: "http://img.b2bpic.net/free-vector/product-logo_23-2148947635.jpg"}, +]; + +const provinces = [ + "All Provinces", "North Holland", "South Holland", "Utrecht", "Groningen", "North Brabant", "Limburg", "Friesland", "Drenthe", "Flevoland", "Overijssel", "Gelderland"]; + +const categories = [ + "All Categories", "Technology", "Marketing", "Sales", "Design", "Data Science", "Human Resources", "Product"]; + +const jobTypes = ["All Types", "Full-time", "Part-time", "Contract", "Freelance"]; + export default function SearchPage() { + const [searchQuery, setSearchQuery] = useState(""); + const [selectedProvince, setSelectedProvince] = useState("All Provinces"); + const [selectedCategory, setSelectedCategory] = useState("All Categories"); + const [selectedJobType, setSelectedJobType] = useState("All Types"); + const [sortBy, setSortBy] = useState("relevant"); + const [minSalary, setMinSalary] = useState(0); + const [maxSalary, setMaxSalary] = useState(150000); + + const filteredJobs = useMemo(() => { + let filtered = mockJobs.filter((job) => { + const matchesSearch = + job.title.toLowerCase().includes(searchQuery.toLowerCase()) || + job.company.toLowerCase().includes(searchQuery.toLowerCase()) || + job.description.toLowerCase().includes(searchQuery.toLowerCase()); + + const matchesProvince = + selectedProvince === "All Provinces" || + job.province === selectedProvince; + + const matchesCategory = + selectedCategory === "All Categories" || + job.category === selectedCategory; + + const matchesJobType = + selectedJobType === "All Types" || job.jobType === selectedJobType; + + const matchesSalary = + job.salaryMin >= minSalary && job.salaryMax <= maxSalary; + + return ( + matchesSearch && + matchesProvince && + matchesCategory && + matchesJobType && + matchesSalary + ); + }); + + if (sortBy === "salary-high") { + filtered.sort((a, b) => b.salaryMax - a.salaryMax); + } else if (sortBy === "salary-low") { + filtered.sort((a, b) => a.salaryMin - b.salaryMin); + } else if (sortBy === "recent") { + filtered.reverse(); + } + + return filtered; + }, [ + searchQuery, + selectedProvince, + selectedCategory, + selectedJobType, + minSalary, + maxSalary, + sortBy, + ]); + return ( -
- -
+
+
+ {/* Search Header */} +
+

+ Find Your Dream Job +

+

+ Discover thousands of opportunities across the Netherlands +

-
- + {/* Main Search Bar */} +
+ + setSearchQuery(e.target.value)} + className="w-full pl-12 pr-4 py-4 rounded-full bg-card border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta" + /> +
+ + {/* Filter Bar */} +
+ {/* Province Filter */} +
+ + +
+ + {/* Category Filter */} +
+ + +
+ + {/* Job Type Filter */} +
+ + +
+ + {/* Salary Range */} +
+ + setMaxSalary(parseInt(e.target.value))} + className="w-full" + /> +
+ + {/* Sort By */} +
+ + +
+
+ + {/* Results Count */} +

+ Showing {filteredJobs.length} of {mockJobs.length} jobs +

+
+ + {/* Job Listings */} +
+ {filteredJobs.length > 0 ? ( + filteredJobs.map((job) => ( +
+
+
+
+ {job.company.charAt(0)} +
+
+

+ {job.title} +

+

+ {job.company} +

+

+ {job.location}, {job.province} +

+
+
+
+

+ {job.salary} +

+ + {job.jobType} + +
+
+ +

+ {job.description} +

+ +
+
+ + {job.category} + +
+ +
+
+ )) + ) : ( +
+

+ No jobs found matching your criteria. +

+ +
+ )} +
+
); -} \ No newline at end of file +}