Jobs dashboard #126
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import React ,{ useState,useEffect } from "react"; | ||
|
|
||
| const dummyjob_desc = { | ||
| icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000", | ||
| jobTitle: "Backend Developer", | ||
| companyName: "Google", | ||
| postedAt: "", | ||
| location: "Bangaluru , India (Onsite)", | ||
| tags: 'remote,fulltime,java,node,python,react,angular,remote,fulltime,java,node,python,react,angular,remote,fulltime,java,node,python,react,angular', | ||
| aboutJob: '',//suppose to be an html document | ||
| budgetRange: '', | ||
| postedBy: { //populated by user id suppose to be hr | ||
| name: '', | ||
| icon: '' | ||
| }, | ||
| companyDetails: { | ||
| companyName: "Google", | ||
| noOfEmployeers: 300, | ||
| noOfFollowers: 9039, | ||
| type: "Software products", | ||
| descriptions: "Google LLC is an American multinational corporation and technology company focusing on online advertising, search engine technology, cloud computing, computer software, quantum computing, e-commerce, consumer electronics, and artificial intelligence." | ||
| } | ||
| } | ||
| const JobDescriptions = ({job}) => { | ||
| //detecting mobile or desktop to display the back button | ||
| const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768); | ||
| const [back,setBack] = useState(false) | ||
| React.useEffect(() => { | ||
| const handleResize = () => setIsMobile(window.innerWidth<768) | ||
| window.addEventListener("resize",handleResize); | ||
| handleResize(); | ||
| if(isMobile) setBack(false) | ||
| return ()=>window.addEventListener("resize",handleResize) | ||
|
|
||
| }) | ||
| const BackButton=()=>{ | ||
| return <button className="p-2 w-40 bg-primary text-white rounded-full">BACK</button> | ||
| } | ||
| if(!job) return <div className="w-full h-full flex items-center justify-center">Please select a job...</div>; // Fallback for no job data | ||
| return ( | ||
| <div className="grid p-5 gap-y-6"> {/* Increased gap-y to 6 for better spacing */} | ||
| {isMobile && back ? <BackButton/> : null} {/* Show Back button only on mobile and if back is true */} | ||
| {/* Company icon and name */} | ||
| <div className="top-details flex flex-row gap-2 items-center"> | ||
| <img src={dummyjob_desc.icon} className="h-[40px] w-[40px]" /> | ||
| <p className="m-0 font-bold">{dummyjob_desc.companyName}</p> | ||
| </div> | ||
|
|
||
| <div className="job-title"> | ||
| <p className="font-bold font-roboto text-3xl m-0">{dummyjob_desc.jobTitle}</p> | ||
| </div> | ||
|
|
||
| <div className="loc-time"> | ||
| <p className="m-0">{dummyjob_desc.location} - {dummyjob_desc.postedAt}</p> | ||
| </div> | ||
|
|
||
| {/* apply and save */} | ||
| <div className="btn-grp flex flex-row gap-2"> | ||
| <button className="p-2 w-40 bg-primary text-white rounded-full">Apply</button> | ||
| <button className="p-2 w-40 bg-primary text-white rounded-full">Save</button> | ||
| </div> | ||
|
|
||
| <div className="pills"> | ||
| <div className="flex flex-wrap gap-2"> {/* Changed to flex-wrap for better tag handling */} | ||
| {dummyjob_desc.tags.split(",").map((x) => ( | ||
| <span className="bg-blue-100 text-white font-medium px-2.5 py-0.5 rounded-full dark:bg-white dark:text-black">{x}</span> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="about-section"> | ||
| <p className="text-3xl font-semibold mb-4">About the Job</p> {/* Added mb-4 */} | ||
| <p className="text-lg m-0"> {/* Added m-0 */} | ||
| {dummyjob_desc.jobDescription} | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="about-company"> | ||
| {/* Heading */} | ||
| <p className="text-2xl font-semibold mb-4">About Company</p> {/* Added mb-4 */} | ||
|
|
||
| {/* Company Details Row */} | ||
| <div className="companydetails flex flex-row items-center justify-between w-full mb-4"> {/* Added mb-4 */} | ||
| {/* Left: Icon + Company Name */} | ||
| <div className="flex flex-row items-center space-x-4"> | ||
| <img | ||
| src={dummyjob_desc.icon} | ||
| alt="Company Icon" | ||
| className="h-20 w-20 object-contain" | ||
| /> | ||
| <p className="text-3xl m-0">{dummyjob_desc.companyDetails.companyName}</p> | ||
| </div> | ||
|
|
||
| {/* Right: Follow Button */} | ||
| <button className="p-2 w-40 bg-primary text-white rounded-full"> | ||
| Follow | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="about-company text-lg"> | ||
| <p className="m-0">{dummyjob_desc.companyDetails.descriptions}</p> {/* Added m-0 */} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default JobDescriptions; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| const jobs = [ | ||
| { | ||
| _id: "93", | ||
| icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000", | ||
| jobTitle: "Node.js Developer", | ||
| companyName: "Microsoft", | ||
| postedAt: "6/4/2025", | ||
| location: "Hyderabad, India (Hybrid)", | ||
| }, | ||
| { | ||
| _id: "94", | ||
| icon: "", | ||
| jobTitle: "Senior Backend Engineer", | ||
| companyName: "Amazon", | ||
| postedAt: "6/4/2025", | ||
| location: "Chennai, India (Remote)", | ||
| }, | ||
| { | ||
| _id: "95", | ||
| icon: "", | ||
| jobTitle: "Software Engineer - Backend", | ||
| companyName: "Flipkart", | ||
| postedAt: "6/4/2025", | ||
| location: "Bengaluru, India (Onsite)", | ||
| }, | ||
| { | ||
| _id: "95", | ||
| icon: "", | ||
| jobTitle: "Backend Developer", | ||
| companyName: "Infosys", | ||
| postedAt: "6/4/2025", | ||
| location: "Pune, India (Hybrid)", | ||
| }, | ||
| { | ||
| _id: "96", | ||
| icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000", | ||
| jobTitle: "Backend Developer", | ||
| companyName: "Google", | ||
| postedAt: "", | ||
| location: "Bangaluru , India (Onsite)", | ||
| }, | ||
| { | ||
| _id: "93", | ||
| icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000", | ||
| jobTitle: "Node.js Developer", | ||
| companyName: "Microsoft", | ||
| postedAt: "6/4/2025", | ||
| location: "Hyderabad, India (Hybrid)", | ||
| }, | ||
| { | ||
| _id: "94", | ||
| icon: "", | ||
| jobTitle: "Senior Backend Engineer", | ||
| companyName: "Amazon", | ||
| postedAt: "6/4/2025", | ||
| location: "Chennai, India (Remote)", | ||
| }, | ||
| { | ||
| _id: "95", | ||
| icon: "", | ||
| jobTitle: "Software Engineer - Backend", | ||
| companyName: "Flipkart", | ||
| postedAt: "6/4/2025", | ||
| location: "Bengaluru, India (Onsite)", | ||
| }, | ||
| { | ||
| _id: "95", | ||
| icon: "", | ||
| jobTitle: "Backend Developer", | ||
| companyName: "Infosys", | ||
| postedAt: "6/4/2025", | ||
| location: "Pune, India (Hybrid)", | ||
| }, | ||
| { | ||
| _id: "96", | ||
| icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000", | ||
| jobTitle: "Backend Developer", | ||
| companyName: "Google", | ||
| postedAt: "", | ||
| location: "Bangaluru , India (Onsite)", | ||
| }, | ||
| { | ||
| _id: "93", | ||
| icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000", | ||
| jobTitle: "Node.js Developer", | ||
| companyName: "Microsoft", | ||
| postedAt: "6/4/2025", | ||
| location: "Hyderabad, India (Hybrid)", | ||
| }, | ||
| { | ||
| _id: "94", | ||
| icon: "", | ||
| jobTitle: "Senior Backend Engineer", | ||
| companyName: "Amazon", | ||
| postedAt: "6/4/2025", | ||
| location: "Chennai, India (Remote)", | ||
| }, | ||
| { | ||
| _id: "95", | ||
| icon: "", | ||
| jobTitle: "Software Engineer - Backend", | ||
| companyName: "Flipkart", | ||
| postedAt: "6/4/2025", | ||
| location: "Bengaluru, India (Onsite)", | ||
| }, | ||
| { | ||
| _id: "95", | ||
| icon: "", | ||
| jobTitle: "Backend Developer", | ||
| companyName: "Infosys", | ||
| postedAt: "6/4/2025", | ||
| location: "Pune, India (Hybrid)", | ||
| }, | ||
| { | ||
| _id: "96", | ||
| icon: "https://img.icons8.com/?size=100&id=V5cGWnc9R4xj&format=png&color=000000", | ||
| jobTitle: "Backend Developer", | ||
| companyName: "Google", | ||
| postedAt: "", | ||
| location: "Bangaluru , India (Onsite)", | ||
| } | ||
| ] | ||
|
|
||
|
|
||
| const JobList = ({onJobSelect}) => { | ||
| return ( | ||
| <div className=""> | ||
| {/* List container */} | ||
| <ul className="space-y-2 bg-base-100"> | ||
| {jobs.map((x) => ( | ||
| <li key={x._id} onClick={()=>onJobSelect(x)} className="flex gap-3 shadow-md p-2"> | ||
| <div className="left"> | ||
| <img | ||
| src={x.icon} | ||
| alt="Job icon" | ||
| className="w-[60px] h-[60px]" | ||
| /> | ||
| </div> | ||
| <div className="rights flex flex-col"> | ||
| <span className="name font-semibold">{x.jobTitle}</span> | ||
| <span className="time text-[12px]">{x.companyName}</span> | ||
| <span className="time text-[12px]">{x.postedAt}</span> | ||
| <span className="time text-[12px]">{x.location}</span> | ||
| </div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default JobList; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| // import { use,useEffect } from "react"; | ||
| // import JobDescriptions from "./JobDescriptions"; | ||
| // import JobList from "./JobList"; | ||
| // import React from "react"; | ||
| // const JobsMain = () => { | ||
| // //const isMobile = window.innerWidth < 768; | ||
| // const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768); | ||
| // useEffect(() => { | ||
| // const handleResize = () => { | ||
| // setIsMobile(window.innerWidth < 768); | ||
| // } | ||
| // window.addEventListener('resize', handleResize); | ||
| // handleResize(); | ||
| // return () => window.removeEventListener('resize', handleResize) }, | ||
| // []); | ||
|
|
||
| // return ( | ||
| // <div className="w-[95%] mx-auto mt-5"> | ||
| // {/* Single grid container with 12 columns */} | ||
|
|
||
| // {/* 4 left and 8 at right in */} | ||
| // <div className="grid grid-cols-12 gap-1"> | ||
| // {isMobile? | ||
| // (<div className="joblist bg-base-100 w-[100%] mx-auto col-span-12 rounded-md shadow-md p-4 overflow-y-auto h-[720px]"> | ||
| // <JobList/> | ||
| // </div> | ||
| // ) | ||
| // : | ||
| // (<><div className="joblist bg-base-100 w-[100%] mx-auto col-span-4 rounded-md shadow-md p-4 overflow-y-auto h-[720px]"> | ||
| // <JobList/> | ||
| // </div> | ||
| // <div className=" bg-base-100 w-[100%] mx-auto rounded-md shadow-md jobdesc col-span-8 p-4 overflow-y-auto h-[720px]"> | ||
| // {/* job title ,company icon ,job location , description , about us , responsibility , requiremnet , offers , location, message from hr */} | ||
| // <JobDescriptions/> | ||
| // </div></>) | ||
| // } | ||
| // </div> | ||
| // </div> | ||
| // ); | ||
| // }; | ||
|
|
||
| // export default JobsMain; | ||
|
||
| import React, { useState, useEffect } from "react"; | ||
| import JobDescriptions from "./JobDescriptions"; | ||
| import JobList from "./JobList"; | ||
|
|
||
| const JobsMain = () => { | ||
| const [isMobile, setIsMobile] = useState(window.innerWidth < 768); | ||
| const [selectedJob, setSelectedJob] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| const handleResize = () => setIsMobile(window.innerWidth < 768); | ||
| window.addEventListener("resize", handleResize); | ||
| return () => window.removeEventListener("resize", handleResize); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="w-[95%] mx-auto mt-5"> | ||
| <div className="grid grid-cols-12 gap-1"> | ||
| {isMobile ? ( | ||
| selectedJob ? ( | ||
| <div className="jobdesc bg-base-100 w-[100%] col-span-12 rounded-md shadow-md p-4 overflow-y-auto h-[720px]"> | ||
| <button | ||
| className="mb-4 text-blue-500 underline" | ||
| onClick={() => setSelectedJob(null)} | ||
| > | ||
| ← Back to Job List | ||
| </button> | ||
|
||
| <JobDescriptions job={selectedJob} /> | ||
| </div> | ||
| ) : ( | ||
| <div className="joblist bg-base-100 w-[100%] col-span-12 rounded-md shadow-md p-4 overflow-y-auto h-[720px]"> | ||
| <JobList onJobSelect={setSelectedJob} /> | ||
| </div> | ||
| ) | ||
| ) : ( | ||
| <> | ||
| <div className="joblist bg-base-100 w-[100%] col-span-4 rounded-md shadow-md p-4 overflow-y-auto h-[720px]"> | ||
| <JobList onJobSelect={setSelectedJob} /> | ||
| </div> | ||
| <div className="jobdesc bg-base-100 w-[100%] col-span-8 rounded-md shadow-md p-4 overflow-y-auto h-[720px]"> | ||
| <JobDescriptions job={selectedJob} /> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default JobsMain; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The desired effect to resize and return would be using Tailwind CSS. useEffect in this case could cause performance issues and css is optimized already for responsiveness.
Think you can redo the resizing and button in tailwind? Let me know.