-
Notifications
You must be signed in to change notification settings - Fork 0
/
JobListItem.tsx
70 lines (68 loc) · 2.14 KB
/
JobListItem.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import companyLogoPlaceholder from "@/public/company-logo-placeholder.png";
import { formatCurrency, formatDate } from "@/lib/utils";
import { JOB } from "@prisma/client";
import { Banknote, Briefcase, Clock, Globe2, MapPin } from "lucide-react";
import Image from "next/image";
import Badge from "./ui/Badge";
interface JobListItemProps {
job: JOB;
}
export default function JobListItem({
job: {
title,
companyName,
type,
locationType,
location,
salary,
companyLogoUrl,
createdAt,
},
}: JobListItemProps) {
return (
<article className="flex gap-3 rounded-lg border p-5 hover:bg-muted/60">
<Image
src={companyLogoUrl || companyLogoPlaceholder}
alt={`${companyName} logo`}
width={100}
height={100}
className="self-center rounded-lg"
/>
<div className="flex-grow space-y-3">
<div>
<h2 className="text-xl font-medium">{title}</h2>
<p className="text-muted-foreground">{companyName}</p>
</div>
<div className="text-muted-foreground">
<p className="flex items-center gap-1.5 sm:hidden">
<Briefcase size={16} className="shrink-0" />
{type}
</p>
<p className="flex items-center gap-1.5">
<MapPin size={16} className="shrink-0" />
{locationType}
</p>
<p className="flex items-center gap-1.5">
<Globe2 size={16} className="shrink-0" />
{location || "Worldwide"}
</p>
<p className="flex items-center gap-1.5">
<Banknote size={16} className="shrink-0" />
{formatCurrency(salary)}
</p>
<p className="flex items-center gap-1.5 sm:hidden">
<Clock size={16} className="shrink-0" />
{formatDate(createdAt)}
</p>
</div>
</div>
<div className="hidden shrink-0 flex-col items-end justify-between sm:flex">
<Badge>{type}</Badge>
<span className="flex items-center gap-1.5 text-muted-foreground">
<Clock size={16} />
{formatDate(createdAt)}
</span>
</div>
</article>
);
}