From 44a13a952f8380d7971311ca425898a6ff8e798d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 22:24:34 +0000
Subject: [PATCH] Update src/app/search/page.tsx

---
 src/app/search/page.tsx | 347 ++++++++++++++++++++++++++++++++++------
 1 file changed, 298 insertions(+), 49 deletions(-)

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 9d80e98..2946dec 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -1,39 +1,119 @@
 "use client";
 
+import { useState, useMemo } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { useState } from "react";
+import { Search, MapPin, DollarSign, Briefcase, X, ChevronLeft, ChevronRight } from "lucide-react";
 
 const navItems = [
-  { name: "Dashboard", id: "/" },
-  { name: "Browse Jobs", id: "/search" },
-  { name: "My Applications", id: "/applications" },
-  { name: "Settings", id: "#settings" },
+  { 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: "Browse Jobs", href: "/search" },
-      { label: "Companies", href: "#" },
+      { 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", href: "#" },
+      { label: "About Jobee", href: "#about" },
+      { label: "Careers", href: "#" },
+      { label: "Contact Us", href: "#contact" },
       { label: "Blog", href: "#" },
-      { label: "Contact", href: "#" },
+    ],
+  },
+  {
+    title: "Resources",    items: [
+      { label: "Privacy Policy", href: "#" },
+      { label: "Terms of Service", href: "#" },
+      { label: "FAQ", href: "#" },
+      { label: "Support", href: "#" },
     ],
   },
 ];
 
+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<string | null>(null);
+  const [selectedJobType, setSelectedJobType] = useState<string | null>(null);
+  const [selectedLocation, setSelectedLocation] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
 
-  const handleSearch = (callback: () => void) => {
-    callback();
+  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 (
@@ -41,62 +121,231 @@ export default function SearchPage() {
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="medium"
-      sizing="medium"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
       background="circleGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="gradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
       secondaryButtonStyle="glass"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           brandName="Jobee"
           navItems={navItems}
           button={{
-            text: "Sign In",            onClick: () => console.log("sign-in"),
-          }}
+            text: "Post a Job",            href: "/post-job"}}
         />
       </div>
 
-      <div id="search" data-section="search" className="py-20">
-        <div className="container mx-auto px-4">
-          <h1 className="text-4xl font-bold mb-4 text-center">Find Your Dream Job</h1>
-          <p className="text-lg text-gray-600 text-center mb-8">Search across all job listings in the Netherlands</p>
-          
-          <div className="max-w-2xl mx-auto mb-12">
-            <div className="flex gap-4">
+      <div className="min-h-screen bg-gradient-to-br from-background to-card py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          {/* Search Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Find Your Perfect Job</h1>
+            <p className="text-foreground/70 text-lg mb-8">Search across thousands of opportunities in the Netherlands</p>
+
+            {/* Search Bar */}
+            <div className="relative mb-8">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-primary-cta w-5 h-5" />
               <input
                 type="text"
-                placeholder="Search jobs..."
+                placeholder="Search job title or company..."
                 value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                onChange={(e) => {
+                  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"
               />
-              <button
-                onClick={() => handleSearch(() => console.log("Searching for:", searchQuery))}
-                className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-              >
-                Search
-              </button>
             </div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
-              <h3 className="text-xl font-semibold mb-2">Senior Software Engineer</h3>
-              <p className="text-gray-600 mb-4">Amsterdam, Netherlands · Full-time</p>
-              <p className="text-sm text-gray-500">Posted 2 days ago</p>
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+            {/* Filters Sidebar */}
+            <div className="lg:col-span-1">
+              <div className="bg-card rounded-lg p-6 border border-accent/10 sticky top-24">
+                <div className="flex justify-between items-center mb-6">
+                  <h3 className="text-lg font-semibold text-foreground">Filters</h3>
+                  {(selectedCategory || selectedJobType || selectedLocation) && (
+                    <button
+                      onClick={handleClearFilters}
+                      className="text-sm text-primary-cta hover:text-primary-cta/80 transition"
+                    >
+                      Clear
+                    </button>
+                  )}
+                </div>
+
+                {/* Category Filter */}
+                <div className="mb-8">
+                  <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
+                    <Briefcase className="w-4 h-4" />
+                    Category
+                  </h4>
+                  <div className="space-y-2">
+                    {categories.map((cat) => (
+                      <label key={cat} className="flex items-center gap-3 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={selectedCategory === cat}
+                          onChange={(e) => {
+                            setSelectedCategory(e.target.checked ? cat : null);
+                            setCurrentPage(1);
+                          }}
+                          className="w-4 h-4 rounded border-accent/20 text-primary-cta focus:ring-primary-cta/20 cursor-pointer"
+                        />
+                        <span className="text-sm text-foreground/70">{cat}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Job Type Filter */}
+                <div className="mb-8">
+                  <h4 className="text-sm font-semibold text-foreground mb-3">Job Type</h4>
+                  <div className="space-y-2">
+                    {jobTypes.map((type) => (
+                      <label key={type} className="flex items-center gap-3 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={selectedJobType === type}
+                          onChange={(e) => {
+                            setSelectedJobType(e.target.checked ? type : null);
+                            setCurrentPage(1);
+                          }}
+                          className="w-4 h-4 rounded border-accent/20 text-primary-cta focus:ring-primary-cta/20 cursor-pointer"
+                        />
+                        <span className="text-sm text-foreground/70">{type}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Location Filter */}
+                <div>
+                  <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
+                    <MapPin className="w-4 h-4" />
+                    Location
+                  </h4>
+                  <div className="space-y-2">
+                    {locations.map((loc) => (
+                      <label key={loc} className="flex items-center gap-3 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={selectedLocation === loc}
+                          onChange={(e) => {
+                            setSelectedLocation(e.target.checked ? loc : null);
+                            setCurrentPage(1);
+                          }}
+                          className="w-4 h-4 rounded border-accent/20 text-primary-cta focus:ring-primary-cta/20 cursor-pointer"
+                        />
+                        <span className="text-sm text-foreground/70">{loc}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              </div>
             </div>
-            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
-              <h3 className="text-xl font-semibold mb-2">Product Manager</h3>
-              <p className="text-gray-600 mb-4">Rotterdam, Netherlands · Full-time</p>
-              <p className="text-sm text-gray-500">Posted 5 days ago</p>
-            </div>
-            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
-              <h3 className="text-xl font-semibold mb-2">UX Designer</h3>
-              <p className="text-gray-600 mb-4">Utrecht, Netherlands · Full-time</p>
-              <p className="text-sm text-gray-500">Posted 1 week ago</p>
+
+            {/* Job Listings */}
+            <div className="lg:col-span-3">
+              {/* Results Info */}
+              <div className="mb-6 flex justify-between items-center">
+                <p className="text-sm text-foreground/70">
+                  Showing {paginatedJobs.length > 0 ? (currentPage - 1) * JOBS_PER_PAGE + 1 : 0}-{Math.min(currentPage * JOBS_PER_PAGE, filteredJobs.length)} of {filteredJobs.length} jobs
+                </p>
+              </div>
+
+              {/* Job Cards */}
+              {paginatedJobs.length > 0 ? (
+                <div className="space-y-4 mb-8">
+                  {paginatedJobs.map((job) => (
+                    <div key={job.id} className="bg-card rounded-lg border border-accent/10 p-6 hover:border-primary-cta/30 transition cursor-pointer">
+                      <div className="flex justify-between items-start mb-3">
+                        <div className="flex-1">
+                          <h3 className="text-xl font-semibold text-foreground mb-1">{job.title}</h3>
+                          <p className="text-sm text-foreground/70">{job.company}</p>
+                        </div>
+                        <span className="px-3 py-1 bg-primary-cta/10 text-primary-cta text-xs font-semibold rounded-full">{job.category}</span>
+                      </div>
+
+                      <p className="text-foreground/70 text-sm mb-4">{job.description}</p>
+
+                      <div className="flex flex-wrap gap-6 mb-4">
+                        <div className="flex items-center gap-2">
+                          <MapPin className="w-4 h-4 text-accent" />
+                          <span className="text-sm text-foreground/70">{job.location}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <DollarSign className="w-4 h-4 text-accent" />
+                          <span className="text-sm text-foreground/70">{job.salary}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Briefcase className="w-4 h-4 text-accent" />
+                          <span className="text-sm text-foreground/70">{job.jobType}</span>
+                        </div>
+                      </div>
+
+                      <div className="flex justify-between items-center">
+                        <span className="text-xs text-foreground/50">{job.postedDate}</span>
+                        <button className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:bg-primary-cta/90 transition text-sm font-medium">
+                          Apply Now
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="bg-card rounded-lg border border-accent/10 p-12 text-center">
+                  <Search className="w-12 h-12 text-foreground/30 mx-auto mb-4" />
+                  <h3 className="text-lg font-semibold text-foreground mb-2">No jobs found</h3>
+                  <p className="text-foreground/70 mb-4">Try adjusting your search filters or search terms</p>
+                  <button
+                    onClick={handleClearFilters}
+                    className="px-4 py-2 bg-primary-cta text-white rounded-lg hover:bg-primary-cta/90 transition text-sm font-medium"
+                  >
+                    Clear Filters
+                  </button>
+                </div>
+              )}
+
+              {/* Pagination */}
+              {totalPages > 1 && (
+                <div className="flex justify-center items-center gap-2 mt-12">
+                  <button
+                    onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                    disabled={currentPage === 1}
+                    className="p-2 rounded-lg border border-accent/20 text-foreground hover:bg-card disabled:opacity-50 disabled:cursor-not-allowed transition"
+                  >
+                    <ChevronLeft className="w-5 h-5" />
+                  </button>
+
+                  <div className="flex items-center gap-2">
+                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                      <button
+                        key={page}
+                        onClick={() => setCurrentPage(page)}
+                        className={`w-10 h-10 rounded-lg font-medium transition ${
+                          currentPage === page
+                            ? "bg-primary-cta text-white"
+                            : "border border-accent/20 text-foreground hover:bg-card"
+                        }`}
+                      >
+                        {page}
+                      </button>
+                    ))}
+                  </div>
+
+                  <button
+                    onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+                    disabled={currentPage === totalPages}
+                    className="p-2 rounded-lg border border-accent/20 text-foreground hover:bg-card disabled:opacity-50 disabled:cursor-not-allowed transition"
+                  >
+                    <ChevronRight className="w-5 h-5" />
+                  </button>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -105,7 +354,7 @@ export default function SearchPage() {
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Jobee"
-          copyrightText="© 2025 Jobee"
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
           columns={footerColumns}
         />
       </div>