Developing the Components

This project's components are split across three folders, each grouped by who uses them:

A. Common Components

•     Navbar.jsx manages the top bar — logo on the left, and on desktop, the user's name and a Logout button on the right; on mobile, it collapses to just the logo, a user icon, and a hamburger button that toggles the MobileMenu open.

•     MobileMenu.jsx is the slide-in panel that appears on smaller screens, sliding in smoothly from the right when the hamburger icon is tapped, showing the user's info and a Logout option.

B. Jobseeker Page Components

•     TabSwitcher.jsx is the capsule-style switcher on the Job Seeker page — it holds a small sliding highlight behind whichever tab (Browse Jobs / My Applications) is currently active, animated with a smooth transition.

•     JobCard.jsx displays a single job's title, company, location, salary, and type, with a "Job Description" toggle that expands to reveal the full description, and an "Apply Now" button that opens ApplyModal for that specific job.

•     ApplyModal.jsx is the popup form for applying — it uses useState to hold the candidate's details, runs simple validation before allowing submission, and calls the onSubmit prop to hand the new application back up to the page.

•     StatusBadge.jsx is a small read-only pill that colours itself based on the status text passed in — amber for Pending, teal for Shortlisted, rose for Rejected.

•     Toast.jsx is the floating confirmation message shown after a successful application, which disappears automatically after a short delay.

C. Employer-Admin Page Components

•     AdminTabSwitcher.jsx is the same capsule-switcher idea as TabSwitcher, extended to work with three tabs instead of two.

•     StatCard.jsx is a small reusable box used on the dashboard to display a single number and label, like Total Jobs or Total Applicants.

•     JobTable.jsx lists every posted job with Edit and Delete actions on each row.

•     JobForm.jsx is the modal used for both adding a new job and editing an existing one, using useEffect to pre-fill its fields whenever an existing job is passed in for editing.

•     ApplicantsTable.jsx lists every applicant with their name (next to a colour-coded status dot), the job they applied for, email, resume, and a StatusDropdown to change their status.

•     StatusDropdown.jsx is the interactive dropdown the employer uses to move an applicant between Pending, Shortlisted, and Rejected.

Note: Colored dots show applicant status at a glance — amber (Pending), teal (Shortlisted), rose (Rejected).