Created
March 7, 2022 08:41
-
-
Save koalicioous/cb6ed651ad1b46b2e6b1506171f7906f to your computer and use it in GitHub Desktop.
This file contains 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
import clsx from 'clsx'; | |
import { useMemo } from 'react'; | |
import Image from 'next/image'; | |
import JobLocationIcon from '@/icons/JobLocationIcon'; | |
import JobPositionIcon from '@/icons/JobPositionIcon'; | |
// import JobSalaryIcon from '@/icons/JobSalaryIcon' | |
import Tag from '@/components/General/Tag'; | |
import TopCandidateIcon from '@/icons/TopCandidateIcon'; | |
import { | |
parseEmploymentType, | |
parseCreatedDate, | |
parseWorkplace, | |
parseSalaryRange, | |
} from '@/utils/etc'; | |
import JobSalaryIcon from '@/icons/JobSalaryIcon'; | |
// import BookmarkIcon from '@/icons/BookmarkIcon' | |
const JobDisplayCard = ({ | |
padding = 'narrow', | |
topCandidate = false, | |
salaryRange = '', | |
role = '', | |
location = '', | |
salaryType = '', | |
companyLogo = '', | |
company = '', | |
workplaceType = '', | |
employmentTypes = [], | |
createdDate = '', | |
className, | |
type = 'big', | |
handleClick = () => {}, | |
...props | |
}) => { | |
const time = useMemo(() => { | |
return parseCreatedDate(createdDate); | |
}, [createdDate]); | |
const workplace = useMemo(() => { | |
return parseWorkplace(workplaceType); | |
}, [workplaceType]); | |
const employment = useMemo(() => { | |
return parseEmploymentType(employmentTypes); | |
}, [employmentTypes]); | |
return ( | |
<div | |
className={clsx( | |
`cursor-pointer rounded-[8px] pt-[42px] border border-[#E6E6E6] relative grid ${className}`, | |
{ 'pl-[18px] pb-[18px] pr-[18px]': padding === 'narrow' }, | |
{ 'pl-[20px] pb-[20px] pr-[20px]': padding === 'wide' } | |
)} | |
onClick={handleClick} | |
{...props} | |
> | |
<div> | |
{topCandidate && ( | |
<div | |
className={` | |
py-[6px] pl-[10px] pr-[20px] rounded-tl-[8px] rounded-br-[8px] | |
bg-[#00AEAC] text-[#009C9A] absolute top-0 left-0 bg-opacity-10 | |
text-[14px] font-semibold h-[30px] flex items-center space-x-2 | |
`} | |
> | |
<TopCandidateIcon /> | |
<span className="ml-2">Top Candidate</span> | |
</div> | |
)} | |
{/* <button className='transition-all absolute top-[16px] right-[16px] hover:bg-gray-100 rounded-full p-1'> | |
<BookmarkIcon /> | |
</button> */} | |
<div | |
className={clsx('w-[32px] h-[32px] rounded-md relative ', { | |
'bg-blumine-90': companyLogo === null, | |
})} | |
> | |
{companyLogo && ( | |
<Image alt="company logo" src={companyLogo} layout="fill" /> | |
)} | |
</div> | |
<h1 | |
className={clsx( | |
'font-bold pt-1 line-clamp-2 text-[#1A1A1A]', | |
{ 'text-[20px]': type === 'big' }, | |
{ 'text-[18px]': type === 'small' } | |
)} | |
> | |
{role} | |
</h1> | |
<span className="text-[14px] mt-2 text-[#1B3286] font-semibold"> | |
{company} | |
</span> | |
<div className="space-y-1 pt-[10px] pb-[5px]"> | |
<div className="flex items-center space-x-1"> | |
<JobLocationIcon /> | |
<span className="text-[14px] text-[#5F5F5F]"> | |
{workplace === 'Remote' ? 'Online' : location} | |
</span> | |
</div> | |
<div className="flex items-center space-x-1"> | |
<JobPositionIcon /> | |
<span className="text-[14px] text-[#5F5F5F]">{employment}</span> | |
</div> | |
{salaryRange && ( | |
<div className="flex items-center space-x-1"> | |
<JobSalaryIcon /> | |
<span className="text-[14px] text-[#5F5F5F]"> | |
{parseSalaryRange(salaryRange)} | |
</span> | |
</div> | |
)} | |
</div> | |
</div> | |
<div className="flex items-center justify-between mt-3 self-end"> | |
<div className="flex items-center space-x-[2px]"> | |
<Tag | |
text={workplace} | |
className="text-[#F03B9B] border border-[#F03B9B] bg-[#FC5EB21A] font-semibold pb-[2px] pt-0 px-2" | |
/> | |
<Tag | |
text={salaryType === 'paid' ? 'Paid' : 'Unpaid'} | |
className="text-[#5C48E5] border border-[#5C48E5] bg-[#5C48E51A] font-semibold pb-[2px] pt-0 px-2" | |
/> | |
</div> | |
<div | |
className={clsx( | |
'text-[#A3A3A3] text-[600]', | |
{ 'text-[14px]': type === 'big' }, | |
{ 'text-[12px]': type === 'small' } | |
)} | |
> | |
{time} | |
</div> | |
</div> | |
</div> | |
); | |
}; | |
export default JobDisplayCard; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment