Jobs Page

This is the jobs page where users can search, filter, and view available job listings on the platform.

Documentation for Jobs Component

Overview

The Jobs component allows users to explore various job opportunities, filter them by type, and search for specific positions. The component features a responsive design and includes options for exploring nearby businesses.

Implementation Details

• State Management:

  • selected: Tracks the currently selected job type filter (e.g., “All”, “Full time”).
  • searchQuery: Stores the user’s input in the search bar for filtering job titles and descriptions.

• Job Data:

  • The jobs array contains mock job data, each entry including properties like id, title, description, type, and imageUrl.

• Responsive Design:

  • The layout adapts to different screen sizes, displaying the filter buttons, search bar, and job listings appropriately for both mobile and desktop views.

• Component Structure:

  • Nearby Business Section: Displays a brief introduction to nearby businesses and a button to explore them.
  • Job Filters: A set of buttons that allow users to filter jobs by type (e.g., “Full time”, “Part time”).
  • Search Bar: A search input that filters job listings based on the user’s query.
  • JobsComponent: Renders the list of filtered jobs.

Code Block

'use client';
import { EllipsisVertical, MapPin, Search } from "lucide-react";
import car from "@/public/images/home/car.jpg";
import trees from "@/public/images/home/trees.jpg";
import { Job } from "@/types/global";
import { useState } from "react";
import styles from "./jobform.module.css";
import JobsComponent from "./Jobs/JobsComponent";
import { Button } from "@nextui-org/react";

export default function Jobs() {
  const [selected, setSelected] = useState<string>("All");
  const [searchQuery, setSearchQuery] = useState<string>("");

  const handleClick = (value: string) => {
    setSelected(value);
  };

  const [jobs] = useState<Job[]>([
    {
      id: "1", title: "Software Engineer", description: "Test are looking for a software engineer to join our team.", type: "Full time", imageUrl: trees
    },
    {
      id: "2", title: "Frontend Developer", description: "We are looking for a frontend developer to join our team.", type: "Part time", imageUrl: car
    },
    {
      id: "3", title: "Frontend Developer", description: "We are looking for a frontend developer to join our team.", type: "Part time", imageUrl: car
    }
  ]);

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(event.target.value);
  };

  // Filter jobs based on selected type and search query
  const filteredJobs = jobs.filter(job =>
    (selected === "All" || job.type === selected) &&
    (job.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      job.description.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  return (
    <div className="p-6 overflow-scroll">
      <div className="business-head bg-green-100 p-4 rounded-md mb-6">
        <h2 className="text-xl font-bold">Nearby Business</h2>
        <p className="text-gray-600">
          Find businesses near to you based on your location and connect with
          them directly.
        </p>
        <Button className="mt-2 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
          Explore
        </Button>
      </div>
      <div className="jobs-main bg-white p-6 rounded-md shadow-md">
        <header className="jobs-head mb-6">
          <h1 className="text-2xl font-bold">Jobs</h1>
        </header>
        <div className="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-6">
          <div className="flex items-center space-x-2 cursor-pointer">
            <MapPin />
            <p className="text-gray-600">Location</p>
          </div>
          <div className="flex items-center space-x-2 cursor-pointer">
            <EllipsisVertical />
            <p className="text-gray-600">Categories</p>
          </div>
          <div className="flex-grow flex items-center w-full sm:w-auto">
            <Search className="mr-2 text-gray-400" size={20} />
            <input
              type="text"
              placeholder="Search for jobs"
              className="search-bar w-full p-2 border rounded-md"
              value={searchQuery}
              onChange={handleSearchChange}
            />
          </div>
        </div>
        {/* Job Filter */}
        <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 mb-6">
          <Button
            className={`${styles.filterButtons} ${selected === "All" ? styles.active : ""}`}
            onClick={() => handleClick("All")}>
            All Jobs
          </Button>
          <Button
            className={`${styles.filterButtons} ${selected === "Full time" ? styles.active : ""}`}
            onClick={() => handleClick("Full time")}>
            Full time
          </Button>
          <Button
            className={`${styles.filterButtons} ${selected === "Part time" ? styles.active : ""}`}
            onClick={() => handleClick("Part time")}>
            Part time
          </Button>
          <Button
            className={`${styles.filterButtons} ${selected === "Internship" ? styles.active : ""}`}
            onClick={() => handleClick("Internship")}>
            Internship
          </Button>
          <Button
            className={`${styles.filterButtons} ${selected === "Volunteer" ? styles.active : ""}`}
            onClick={() => handleClick("Volunteer")}>
            Volunteer
          </Button>
          <Button
            className={`${styles.filterButtons} ${selected === "Contract" ? styles.active : ""}`}
            onClick={() => handleClick("Contract")}>
            Contract
          </Button>
        </div>
        <main className="main-content flex flex-col items-center rounded-lg p-5 overflow-auto">
          {jobs.length > 0 ? (
            <JobsComponent selectedJob={selected} jobs={filteredJobs} />
          ) : (
            <p className="text-gray-500">No available jobs to show.</p>
          )}
        </main>
      </div>
    </div>
  );
}