From 6373b5ea06cc95f17e8dca9ece1e1ede29004a52 Mon Sep 17 00:00:00 2001 From: bender Date: Sun, 8 Mar 2026 22:26:12 +0000 Subject: [PATCH] Update src/app/search/page.tsx --- src/app/search/page.tsx | 338 ++++++++++++++++++++++++++++++++++------ 1 file changed, 287 insertions(+), 51 deletions(-) diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx index 2b08dc4..2946dec 100644 --- a/src/app/search/page.tsx +++ b/src/app/search/page.tsx @@ -1,11 +1,10 @@ "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, MapPin, DollarSign, Briefcase, X, ChevronLeft, ChevronRight } from "lucide-react"; const navItems = [ { name: "Search Jobs", id: "search" }, @@ -42,7 +41,81 @@ const footerColumns = [ }, ]; +interface Job { + id: string; + title: string; + company: string; + location: string; + salary: string; + jobType: string; + category: string; + description: string; + postedDate: string; +} + +const allJobs: Job[] = [ + { + id: "1", title: "Senior Software Engineer", company: "TechCorp Amsterdam", location: "Amsterdam, North Holland", salary: "€80,000 - €120,000", jobType: "Full-time", category: "Technology", description: "We're looking for an experienced software engineer to join our growing team.", postedDate: "2 days ago"}, + { + id: "2", title: "UX/UI Designer", company: "DesignStudio Rotterdam", location: "Rotterdam, South Holland", salary: "€50,000 - €75,000", jobType: "Full-time", category: "Design", description: "Join our creative team to design beautiful user experiences for web and mobile.", postedDate: "1 day ago"}, + { + id: "3", title: "Data Scientist", company: "DataFlow Utrecht", location: "Utrecht, Utrecht", salary: "€70,000 - €110,000", jobType: "Full-time", category: "Data & Analytics", description: "Help us build predictive models and analyze large datasets to drive business insights.", postedDate: "3 days ago"}, + { + id: "4", title: "Product Manager", company: "InnovateCo The Hague", location: "The Hague, South Holland", salary: "€60,000 - €95,000", jobType: "Full-time", category: "Product", description: "Lead product strategy and development for our flagship platform.", postedDate: "5 days ago"}, + { + id: "5", title: "Marketing Manager", company: "BrandBoost Groningen", location: "Groningen, Groningen", salary: "€45,000 - €70,000", jobType: "Full-time", category: "Marketing", description: "Develop and execute marketing strategies to grow our brand presence.", postedDate: "1 week ago"}, + { + id: "6", title: "Backend Developer", company: "CodeLabs Eindhoven", location: "Eindhoven, North Brabant", salary: "€65,000 - €100,000", jobType: "Full-time", category: "Technology", description: "Build scalable backend systems for millions of users worldwide.", postedDate: "3 days ago"}, + { + id: "7", title: "HR Specialist", company: "PeopleFirst Maastricht", location: "Maastricht, Limburg", salary: "€40,000 - €60,000", jobType: "Full-time", category: "Human Resources", description: "Support our HR team in recruiting and developing top talent.", postedDate: "4 days ago"}, + { + id: "8", title: "Sales Executive", company: "SalesForce Arnhem", location: "Arnhem, Gelderland", salary: "€35,000 - €55,000", jobType: "Full-time", category: "Sales", description: "Generate leads and close deals for our innovative B2B solutions.", postedDate: "2 days ago"}, + { + id: "9", title: "DevOps Engineer", company: "CloudNine Amsterdam", location: "Amsterdam, North Holland", salary: "€75,000 - €115,000", jobType: "Full-time", category: "Technology", description: "Manage cloud infrastructure and CI/CD pipelines for our platform.", postedDate: "1 day ago"}, + { + id: "10", title: "Content Writer", company: "ContentHub Haarlem", location: "Haarlem, North Holland", salary: "€35,000 - €50,000", jobType: "Part-time", category: "Content", description: "Create engaging content for our blog and social media channels.", postedDate: "2 days ago"}, + { + id: "11", title: "Financial Analyst", company: "FinanceCore Amsterdam", location: "Amsterdam, North Holland", salary: "€55,000 - €85,000", jobType: "Full-time", category: "Finance", description: "Analyze financial data and provide insights for strategic decision-making.", postedDate: "6 days ago"}, + { + id: "12", title: "Frontend Developer", company: "WebStudio Rotterdam", location: "Rotterdam, South Holland", salary: "€60,000 - €95,000", jobType: "Full-time", category: "Technology", description: "Build beautiful, responsive web applications using modern technologies.", postedDate: "5 days ago"}, +]; + +const JOBS_PER_PAGE = 6; + export default function SearchPage() { + const [searchQuery, setSearchQuery] = useState(""); + const [selectedCategory, setSelectedCategory] = useState(null); + const [selectedJobType, setSelectedJobType] = useState(null); + const [selectedLocation, setSelectedLocation] = useState(null); + const [currentPage, setCurrentPage] = useState(1); + + const categories = ["Technology", "Design", "Data & Analytics", "Product", "Marketing", "Finance", "Sales", "Content", "Human Resources"]; + const jobTypes = ["Full-time", "Part-time", "Contract", "Remote"]; + const locations = [ + "Amsterdam, North Holland", "Rotterdam, South Holland", "Utrecht, Utrecht", "The Hague, South Holland", "Groningen, Groningen", "Eindhoven, North Brabant", "Maastricht, Limburg", "Arnhem, Gelderland", "Haarlem, North Holland"]; + + const filteredJobs = useMemo(() => { + return allJobs.filter((job) => { + const matchesSearch = searchQuery === "" || job.title.toLowerCase().includes(searchQuery.toLowerCase()) || job.company.toLowerCase().includes(searchQuery.toLowerCase()); + const matchesCategory = selectedCategory === null || job.category === selectedCategory; + const matchesJobType = selectedJobType === null || job.jobType === selectedJobType; + const matchesLocation = selectedLocation === null || job.location === selectedLocation; + + return matchesSearch && matchesCategory && matchesJobType && matchesLocation; + }); + }, [searchQuery, selectedCategory, selectedJobType, selectedLocation]); + + const totalPages = Math.ceil(filteredJobs.length / JOBS_PER_PAGE); + const paginatedJobs = filteredJobs.slice((currentPage - 1) * JOBS_PER_PAGE, currentPage * JOBS_PER_PAGE); + + const handleClearFilters = () => { + setSearchQuery(""); + setSelectedCategory(null); + setSelectedJobType(null); + setSelectedLocation(null); + setCurrentPage(1); + }; + return ( -
- -
+
+
+ {/* Search Header */} +
+

Find Your Perfect Job

+

Search across thousands of opportunities in the Netherlands

-
- + {/* Search Bar */} +
+ + { + setSearchQuery(e.target.value); + setCurrentPage(1); + }} + className="w-full pl-12 pr-4 py-3 rounded-lg border border-accent/20 bg-card text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta focus:ring-2 focus:ring-primary-cta/20 transition" + /> +
+
+ +
+ {/* Filters Sidebar */} +
+
+
+

Filters

+ {(selectedCategory || selectedJobType || selectedLocation) && ( + + )} +
+ + {/* Category Filter */} +
+

+ + Category +

+
+ {categories.map((cat) => ( + + ))} +
+
+ + {/* Job Type Filter */} +
+

Job Type

+
+ {jobTypes.map((type) => ( + + ))} +
+
+ + {/* Location Filter */} +
+

+ + Location +

+
+ {locations.map((loc) => ( + + ))} +
+
+
+
+ + {/* Job Listings */} +
+ {/* Results Info */} +
+

+ Showing {paginatedJobs.length > 0 ? (currentPage - 1) * JOBS_PER_PAGE + 1 : 0}-{Math.min(currentPage * JOBS_PER_PAGE, filteredJobs.length)} of {filteredJobs.length} jobs +

+
+ + {/* Job Cards */} + {paginatedJobs.length > 0 ? ( +
+ {paginatedJobs.map((job) => ( +
+
+
+

{job.title}

+

{job.company}

+
+ {job.category} +
+ +

{job.description}

+ +
+
+ + {job.location} +
+
+ + {job.salary} +
+
+ + {job.jobType} +
+
+ +
+ {job.postedDate} + +
+
+ ))} +
+ ) : ( +
+ +

No jobs found

+

Try adjusting your search filters or search terms

+ +
+ )} + + {/* Pagination */} + {totalPages > 1 && ( +
+ + +
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( + + ))} +
+ + +
+ )} +
+
+
); -} \ No newline at end of file +}