first commit
This commit is contained in:
kandrusyak
238
src/pages/job/JobListing.jsx
Normal file
238
src/pages/job/JobListing.jsx
Normal file
@@ -0,0 +1,238 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import JobSidebar from '../../partials/job/JobSidebar';
|
||||
import DropdownSort from '../../components/DropdownSort';
|
||||
import JobListItem from '../../partials/job/JobListItem';
|
||||
import PaginationNumeric from '../../components/PaginationNumeric';
|
||||
|
||||
import Image01 from '../../images/company-icon-05.svg';
|
||||
import Image02 from '../../images/company-icon-06.svg';
|
||||
import Image03 from '../../images/company-icon-03.svg';
|
||||
import Image04 from '../../images/company-icon-07.svg';
|
||||
import Image05 from '../../images/company-icon-08.svg';
|
||||
import Image06 from '../../images/company-icon-01.svg';
|
||||
import Image07 from '../../images/company-icon-02.svg';
|
||||
|
||||
function JobListing() {
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: 0,
|
||||
image: Image01,
|
||||
company: 'Company 01',
|
||||
role: 'Senior Web App Designer',
|
||||
link: '/job/job-post',
|
||||
details: 'Contract / Remote / New York, NYC',
|
||||
date: 'Jan 4',
|
||||
type: 'Featured',
|
||||
fav: false,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
image: Image01,
|
||||
company: 'Company 02',
|
||||
role: 'Senior Full Stack Engineer',
|
||||
link: '/job/job-post',
|
||||
details: 'Contract / Remote / New York, NYC',
|
||||
date: 'Jan 7',
|
||||
type: 'New',
|
||||
fav: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: Image02,
|
||||
company: 'Company 03',
|
||||
role: 'Ruby on Rails Engineer',
|
||||
link: '/job/job-post',
|
||||
details: 'Contract / Remote / New York, NYC',
|
||||
date: 'Jan 7',
|
||||
type: 'New',
|
||||
fav: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: Image03,
|
||||
company: 'Company 04',
|
||||
role: 'Senior Software Engineer Backend',
|
||||
link: '/job/job-post',
|
||||
details: 'Full-time / Remote / Anywhere',
|
||||
date: 'Jan 7',
|
||||
type: 'New',
|
||||
fav: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: Image04,
|
||||
company: 'Company 05',
|
||||
role: 'React.js Software Developer',
|
||||
link: '/job/job-post',
|
||||
details: 'Full-time / Remote / London, UK',
|
||||
date: 'Jan 6',
|
||||
type: 'New',
|
||||
fav: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: Image05,
|
||||
company: 'Company 06',
|
||||
role: 'Senior Full Stack Rails Developer',
|
||||
link: '/job/job-post',
|
||||
details: 'Part-time / Remote / Milan, IT',
|
||||
date: 'Jan 6',
|
||||
type: 'New',
|
||||
fav: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: Image06,
|
||||
company: 'Company 07',
|
||||
role: 'Principal Software Engineer',
|
||||
link: '/job/job-post',
|
||||
details: 'Freelance / Remote / London, UK',
|
||||
date: 'Jan 6',
|
||||
type: 'New',
|
||||
fav: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
image: Image04,
|
||||
company: 'Company 08',
|
||||
role: 'Contract React Native Engineer',
|
||||
link: '/job/job-post',
|
||||
details: 'Contract / Remote / Miami, FL',
|
||||
date: 'Jan 6',
|
||||
type: 'New',
|
||||
fav: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: Image05,
|
||||
company: 'Company 09',
|
||||
role: 'Senior Client Engineer (React & React Native)',
|
||||
link: '/job/job-post',
|
||||
details: 'Full-time / Remote / Lincoln, NE',
|
||||
date: 'Jan 5',
|
||||
type: 'New',
|
||||
fav: false,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
image: Image07,
|
||||
company: 'Company 10',
|
||||
role: 'QA Automation Engineer',
|
||||
link: '/job/job-post',
|
||||
details: 'Contract / Remote / Anywhere',
|
||||
date: 'Jan 5',
|
||||
type: 'New',
|
||||
fav: false,
|
||||
},
|
||||
];
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="sm:flex sm:justify-between sm:items-center mb-5">
|
||||
|
||||
{/* Left: Title */}
|
||||
<div className="mb-4 sm:mb-0">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Search For Jobs ✨</h1>
|
||||
</div>
|
||||
|
||||
{/* Post a job button */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
|
||||
<svg className="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
|
||||
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
|
||||
</svg>
|
||||
<span className="hidden xs:block ml-2">Post A Job</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Page content */}
|
||||
<div className="flex flex-col space-y-10 sm:flex-row sm:space-x-6 sm:space-y-0 md:flex-col md:space-x-0 md:space-y-10 xl:flex-row xl:space-x-6 xl:space-y-0 mt-9">
|
||||
|
||||
{/* Sidebar */}
|
||||
<JobSidebar />
|
||||
|
||||
{/* Content */}
|
||||
<div className='w-full'>
|
||||
|
||||
{/* Search form */}
|
||||
<div className="mb-5">
|
||||
<form className="relative">
|
||||
<label htmlFor="job-search" className="sr-only">Search</label>
|
||||
<input id="job-search" className="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Search job title or keyword…" />
|
||||
<button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Jobs header */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="text-sm text-slate-500 italic">Showing 289 Jobs</div>
|
||||
{/* Sort */}
|
||||
<div className="text-sm">
|
||||
<span>Sort by </span>
|
||||
<DropdownSort align="right" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Jobs list */}
|
||||
<div className='space-y-2'>
|
||||
{items.map((item) => {
|
||||
return (
|
||||
<JobListItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
image={item.image}
|
||||
role={item.role}
|
||||
link={item.link}
|
||||
details={item.details}
|
||||
date={item.date}
|
||||
type={item.type}
|
||||
fav={item.fav}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="mt-6">
|
||||
<PaginationNumeric />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default JobListing;
|
||||
Reference in New Issue
Block a user