JobCard.tsx

import Link from 'next/link'
import dayjs from 'dayjs'
import { Box, BoxProps, Flex, Text } from '@chakra-ui/react'
import { FC } from 'react'
import cx from 'classnames'
import { Job } from '@/models'
import Tag from '@/components/ui/TagView'
import s from './JobCard.module.css'

type Props = Props & {
  job: Job
  highlighted?: boolean
  urgent?: boolean
  compact?: boolean
}

const JobCard: FC<Props> = props => {
  const { 
    job, 
    compact = false, 
    highlighted = false, 
    urgent = false, 
    ...props 
  } = props
  
  return (
    <Box
      className={cx(s.container, {
        [s.urgent]: urgent,
        [s.highlighted]: highlighted,
        [s.compact]: compact,
      })}
      sx={{
        '--urgent': urgent ? 'true' : 'false',
        '--highlighted': highlighted ? 'true' : 'false',
        '--compact': compact ? 'true' : 'false',
      }}
      {...props}
    >
      <Box className={s.inner}>
        <Box className={s.top}> 
          
          <Text 
            size="body" 
            className={s.published}
          >
            {urgent ? '🔥 Urgent' : dayjs(job.publishedDate).fromNow()}
          </Text>
          
          <Text 
            size="title" 
            className={s.title}
          >
            <Link href={`/job/${job.id}`}>{job.name}</Link>
          </Text>
          
        </Box>

        <Box className={s.bottom}>
          <Text 
            size="body"
            className={s.companyName}
          >
            {job.companyName} | {job.regions.length ? job.regions.map((region) => region.name).join(', ') : 'Global Remote'}
          </Text>
          
          <Box className={s.salary}>
            {job.minSalary && job.maxSalary ? 
              <>{job.minSalary}k - {job.maxSalary}k USD/year</> : 
              <>starts at{job.minSalary}k USD/year</>}
          </Box>

          <Box className={s.divider} />
        
          <Flex className={s.tags}>
            {job.tags.map(tag => 
              <Tag size="sm" variant="grey" key={tag.id}>{tag.name}</Tag>
            )}
          </Flex>  
            
        </Box>
      </Box>
    </Box>
  )
}

export default JobCard