stacker.news/components/item-job.js

103 lines
3.8 KiB
JavaScript
Raw Normal View History

2023-07-24 22:50:12 +00:00
import { string } from 'yup'
2022-07-21 22:55:05 +00:00
import Toc from './table-of-contents'
2023-07-24 18:35:05 +00:00
import Button from 'react-bootstrap/Button'
import Image from 'react-bootstrap/Image'
2022-07-21 22:55:05 +00:00
import { SearchTitle } from './item'
import styles from './item.module.css'
import Link from 'next/link'
import { timeSince } from '@/lib/time'
import EmailIcon from '@/svgs/mail-open-line.svg'
2022-12-19 23:21:47 +00:00
import Share from './share'
import Badges from './badge'
import { MEDIA_URL } from '@/lib/constants'
import { abbrNum } from '@/lib/format'
import { Badge } from 'react-bootstrap'
2022-07-21 22:55:05 +00:00
export default function ItemJob ({ item, toc, rank, children }) {
2023-07-24 22:50:12 +00:00
const isEmail = string().email().isValidSync(item.url)
2022-07-21 22:55:05 +00:00
return (
<>
{rank
? (
2022-08-18 19:19:01 +00:00
<div className={`${styles.rank} pb-2 align-self-center`}>
2022-07-21 22:55:05 +00:00
{rank}
</div>)
: <div />}
2023-07-25 14:14:45 +00:00
<div className={styles.item}>
<Link href={`/items/${item.id}`}>
<Image
src={item.uploadId ? `${MEDIA_URL}/${item.uploadId}` : '/jobs-default.png'} width='42' height='42' className={styles.companyImage}
/>
2022-07-21 22:55:05 +00:00
</Link>
<div className={`${styles.hunk} align-self-center mb-0`}>
<div className={`${styles.main} flex-wrap d-inline`}>
2023-07-24 18:35:05 +00:00
<Link href={`/items/${item.id}`} className={`${styles.title} text-reset me-2`}>
{item.searchTitle
? <SearchTitle title={item.searchTitle} />
: (
<>{item.title}</>)}
2022-07-21 22:55:05 +00:00
</Link>
</div>
2023-07-25 14:14:45 +00:00
<div className={styles.other}>
2022-07-21 22:55:05 +00:00
{item.company &&
<>
{item.company}
</>}
{(item.location || item.remote) &&
<>
<span> \ </span>
{`${item.location || ''}${item.location && item.remote ? ' or ' : ''}${item.remote ? 'Remote' : ''}`}
</>}
<wbr />
<span> \ </span>
{item.boost > 0 && <span>{abbrNum(item.boost)} boost \ </span>}
2022-07-21 22:55:05 +00:00
<span>
<Link href={`/${item.user.name}`} className='d-inline-flex align-items-center'>
@{item.user.name}<Badges badgeClassName='fill-grey' height={12} width={12} user={item.user} />
2022-07-21 22:55:05 +00:00
</Link>
<span> </span>
<Link href={`/items/${item.id}`} title={item.createdAt} className='text-reset' suppressHydrationWarning>
{timeSince(new Date(item.createdAt))}
2022-07-21 22:55:05 +00:00
</Link>
</span>
{item.subName &&
<Link href={`/~${item.subName}`}>
{' '}<Badge className={styles.newComment} bg={null}>{item.subName}</Badge>
</Link>}
{item.status === 'STOPPED' &&
<>{' '}<Badge bg='info' className={styles.badge}>stopped</Badge></>}
{item.mine && !item.deletedAt &&
2022-11-29 17:28:57 +00:00
(
<>
<wbr />
<span> \ </span>
<Link href={`/items/${item.id}/edit`} className='text-reset fw-bold'>
edit
2022-11-29 17:28:57 +00:00
</Link>
</>)}
2022-07-21 22:55:05 +00:00
</div>
</div>
2022-12-19 23:21:47 +00:00
{toc &&
<>
2023-12-15 18:10:29 +00:00
<Share title={item?.title} path={`/items/${item?.id}`} />
2022-12-19 23:21:47 +00:00
<Toc text={item.text} />
</>}
2022-07-21 22:55:05 +00:00
</div>
{children && (
2023-07-25 14:14:45 +00:00
<div className={styles.children} style={{ marginLeft: 'calc(42px + .8rem)' }}>
2022-07-21 22:55:05 +00:00
<div className='mb-3 d-flex'>
<Button
target='_blank' href={isEmail ? `mailto:${item.url}?subject=${encodeURIComponent(item.title)} via Stacker News` : item.url}
>
2023-07-24 18:35:05 +00:00
apply {isEmail && <EmailIcon className='ms-1' />}
2022-07-21 22:55:05 +00:00
</Button>
2023-07-24 18:35:05 +00:00
{isEmail && <div className='ms-3 align-self-center text-muted fw-bold'>{item.url}</div>}
2022-07-21 22:55:05 +00:00
</div>
{children}
</div>
)}
</>
)
}