Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance Message Page & Work on Dynamic Routing #135

Closed
wants to merge 6 commits into from
Closed

Enhance Message Page & Work on Dynamic Routing #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1a489c5
Enhanced message page and started dynamic routing for job & course ov…
Mercyaksss Feb 22, 2025
72919ab
Adjusted message container's height
Mercyaksss Feb 22, 2025
28421b5
Created dymanic routing for the job and course page
Mercyaksss Feb 25, 2025
d96d7ac
Merge branch 'main' into feature/message-page-improvements-104
Mercyaksss Feb 25, 2025
5b06aa4
Added navbar and footer to the job overview page
Mercyaksss Feb 25, 2025
d521a7e
Fix: Removed unused imports causing build failure
Mercyaksss Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 25 additions & 21 deletions .../job-seeker/job-overview/job-overview.tsx → ...ashboard/job-seeker/[id]/job-overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,31 @@ import {
import { IoBriefcaseOutline } from "react-icons/io5";
import { useState } from "react";
import ApplicationModal from "../components/ApplicationForm";
import { useParams } from 'next/navigation';
import { sampleJobs } from "../data";


export default function JobSeekerOverview() {

const params = useParams();
const jobId = params.id as string;
const [isModalOpen, setIsModalOpen] = useState(false);

// If jobId exists, find that specific job, otherwise use the first job
const job = jobId
? sampleJobs.find(job => job.id === jobId)
: sampleJobs[0];

// If no jobs available at all
if (!job) {
return <div>No jobs available</div>;
}


const toggleModal = () => {
setIsModalOpen((prev) => !prev);
};

const jobDetails = {
title: "Quality Assurance Manager",
company: "SkillNet Incorporated",
location: "Lagos, Nigeria",
type: "Remote",
posted: "Posted 5 days ago",
salary: "250,000 - $300,000 per year",
jobType: "Full-time",
level: "Senior Level",
deadline: "Deadline: 21st January, 2025",
};

return (
<div className="max-w-[1256px] mx-auto px-4 sm:px-6 lg:px-10 py-8 flex gap-8">
{/* Left Column - Job Details */}
Expand All @@ -46,10 +50,10 @@ export default function JobSeekerOverview() {
{/* Company Info */}
<div>
<h1 className="text-[#FCFCFC] font-[600] leading-[28.8px] text-[24px]">
{jobDetails.title}
{job.title}
</h1>
<p className="text-[#BBBBBB] font-[400] text-[16px] leading-[19.2px]">
{jobDetails.company}
{job.company}
</p>
</div>
{/* Apply Button */}
Expand All @@ -68,12 +72,12 @@ export default function JobSeekerOverview() {
<div className="flex items-center gap-4 text-[14px] text-[#BBBBBB] font-[400] leading-[16.8px]">
<span className="flex items-center gap-1">
<MapPin className="w-[16px] h-[16px] text-[#BBBBBB]" />
{jobDetails.location}
{job.location}
</span>
<span className="block w-[2px] h-[28px] bg-[#1D1D1C] rounded-[8px]" />
<span>{jobDetails.type}</span>
<span>{job.type}</span>
<span className="block w-[2px] h-[28px] bg-[#1D1D1C] rounded-[8px]" />
<span>{jobDetails.posted}</span>
<span>{job.posted}</span>
</div>
{/* Bookmark Button */}
<div className="flex items-center gap-2">
Expand All @@ -88,19 +92,19 @@ export default function JobSeekerOverview() {
<div className="grid grid-cols-1 gap-2 text-sm mb-[24px] text-[#BBBBBB]">
<div className="flex gap-4">
<IoBriefcaseOutline className="w-5 h-5 text-[#696969]" />
<p>{jobDetails.jobType}</p>
<p>{job.jobType}</p>
</div>
<div className="flex gap-2">
<Banknote className="w-5 h-5 text-[#696969]" />
<p>{jobDetails.salary}</p>
<p>{job.salary}</p>
</div>
<div className="flex gap-2">
<BarChart className="w-5 h-5 text-[#696969]" />
<p>{jobDetails.level}</p>
<p>{job.level}</p>
</div>
<div className="flex gap-2">
<Clock className="w-5 h-5 text-[#696969]" />
<p>{jobDetails.deadline}</p>
<p>{job.deadline}</p>
</div>
</div>
</div>
Expand Down
13 changes: 13 additions & 0 deletions src/app/dashboard/job-seeker/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import JobSeekerOverview from "./job-overview";
import Footer from "@/components/Footer";
import NavbarJobSeeker from "@/components/Navbar-job-seeker";

export default function JobPage() {
return (
<div>
<NavbarJobSeeker/>
<JobSeekerOverview/>
<Footer/>
</div>
);
}
96 changes: 52 additions & 44 deletions src/app/dashboard/job-seeker/components/ApplicationTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import React from "react";
import { sampleJobs, Job } from "../data";

export interface Job {
title: string;
company: string;
location: string;
workMode: string;
type: string;
level: string;
postedTime: string;

interface ApplicationTabProps {
onClick: (jobId: string) => void;
}

// Clock Icon Component
Expand Down Expand Up @@ -51,16 +47,24 @@ const LocationIcon = () => (
);

// Job Card Component
const JobCard: React.FC<{ job: Job }> = ({ job }) => (
<div className="mb-4 p-5 bg-[#1D1D1C] rounded-lg shadow-md">
<div className="flex justify-between items-start mb-2">
const JobCard: React.FC<{ job: Job; onClick: (jobId: string) => void }> = ({ job, onClick }) => (
<div className="mb-4 p-5 bg-[#1D1D1C] w-[760px] rounded-lg shadow-md">
<div className="flex justify-between items-start mb-2"
onClick={() => onClick(job.id)}
>
<div>
<h3 className="text-[24px] font-semibold text-white mb-2">
{job.title}
</h3>
<p className="text-[#BBBBBB]">{job.company}</p>
</div>
<button className="px-3 py-2 text-xs lg:text-sm flex items-center space-x-1 bg-gray-700 text-white rounded bg-inherit border-[#696969] border hover:border-[#D0EFB1] hover:text-[#D0EFB1]">

<button className="px-3 py-2 text-xs lg:text-sm flex items-center space-x-1 bg-gray-700 text-white rounded bg-inherit border-[#696969] border hover:border-[#D0EFB1] hover:text-[#D0EFB1]"
onClick={(e) => {
e.stopPropagation(); // Prevent triggering the parent div's onClick
onClick(job.id);
}}
>
VIEW APPLICATION
</button>
</div>
Expand Down Expand Up @@ -93,43 +97,47 @@ const JobCard: React.FC<{ job: Job }> = ({ job }) => (
);


const ApplicationTab = () => {
const sampleJobs: Job[] = [
{
title: "Full Stack Developer",
company: "SkillNet Incorporated",
location: "Lagos, Nigeria",
workMode: "Hybrid",
type: "Full time",
level: "Entry Level",
postedTime: "12 hours ago",
},
{
title: "Full Stack Developer",
company: "SkillNet Incorporated",
location: "Lagos, Nigeria",
workMode: "Hybrid",
type: "Full time",
level: "Entry Level",
postedTime: "12 hours ago",
},
{
title: "Full Stack Developer",
company: "SkillNet Incorporated",
location: "Lagos, Nigeria",
workMode: "Hybrid",
type: "Full time",
level: "Entry Level",
postedTime: "12 hours ago",
},
];

const ApplicationTab: React.FC<ApplicationTabProps> = ({ onClick }) => {

// const sampleJobs: Job[] = [
// {
// title: "Full Stack Developer",
// company: "SkillNet Incorporated",
// location: "Lagos, Nigeria",
// workMode: "Hybrid",
// type: "Full time",
// level: "Entry Level",
// postedTime: "12 hours ago",
// },
// {
// title: "Full Stack Developer",
// company: "SkillNet Incorporated",
// location: "Lagos, Nigeria",
// workMode: "Hybrid",
// type: "Full time",
// level: "Entry Level",
// postedTime: "12 hours ago",
// },
// {
// title: "Full Stack Developer",
// company: "SkillNet Incorporated",
// location: "Lagos, Nigeria",
// workMode: "Hybrid",
// type: "Full time",
// level: "Entry Level",
// postedTime: "12 hours ago",
// },
// ];

return (
<div className="flex justify-between">
<div className="w-full">
{sampleJobs.map((job, index) => (
<JobCard key={index} job={job} />
<JobCard
key={index}
job={job}
onClick={onClick} // Pass down the onClick handler from props
/>
))}
</div>
</div>
Expand Down
10 changes: 7 additions & 3 deletions src/app/dashboard/job-seeker/components/RecentTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React from "react";
import RecentTabBox from "./RecentTabBox";
import { Job } from "./RecentTabBox";
import AllFilters from "./SideAllFilters";
import { Job } from "@/app/dashboard/job-seeker/data";


interface RecentTabProps {
onSaveJob: (job: Job) => void;
onJobClick: (jobId: string) => void;
}

const RecentTab: React.FC<RecentTabProps> = ({ onSaveJob }) => {
const RecentTab: React.FC<RecentTabProps> = ({ onSaveJob, onJobClick }) => {
return (
<div className="flex justify-between">
<RecentTabBox onSaveJob={onSaveJob} />
<RecentTabBox onSaveJob={onSaveJob} onJobClick={onJobClick} />
<AllFilters />
</div>
);
};
Expand Down
Loading
Loading