Spaces:
Running
Running
File size: 3,801 Bytes
90723a6 | 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import React from 'react'
import { formatDateTime } from '../utils/date.js'
import { Link } from 'react-router-dom'
export function JobsTable({ jobs, isLoading }) {
if (isLoading) {
const skeletonRows = Array.from({ length: 8 })
return (
<div className="overflow-x-auto w-full relative z-10">
<table className="min-w-full text-sm">
<thead>
<tr className="text-left text-white/70">
<th className="p-3">Title</th>
<th className="p-3">Company</th>
<th className="p-3">Location</th>
<th className="p-3">Salary</th>
<th className="p-3">Inserted</th>
<th className="p-3"></th>
</tr>
</thead>
<tbody>
{skeletonRows.map((_, idx) => (
<tr key={idx} className={`border-t border-white/10 ${idx % 2 === 0 ? 'bg-white/[0.02]' : ''}`}>
<td className="p-3">
<div className="flex items-center gap-2">
<span className="skeleton h-4 w-48"></span>
</div>
</td>
<td className="p-3"><span className="skeleton h-4 w-32"></span></td>
<td className="p-3"><span className="skeleton h-4 w-24"></span></td>
<td className="p-3"><span className="skeleton h-4 w-28"></span></td>
<td className="p-3"><span className="skeleton h-4 w-36"></span></td>
<td className="p-3 text-right"><span className="skeleton h-7 w-16 inline-block"></span></td>
</tr>
))}
</tbody>
</table>
</div>
)
}
function formatSalary(salary) {
if (!salary || (salary.min == null && salary.max == null)) return '—'
const a = typeof salary.min === 'number' ? `€${salary.min.toLocaleString()}` : null
const b = typeof salary.max === 'number' ? `€${salary.max.toLocaleString()}` : null
if (a && b) return `${a} - ${b}`
return a || b || '—'
}
return (
<div className="overflow-x-auto w-full relative z-10">
<table className="min-w-full text-sm">
<thead>
<tr className="text-left text-white/70">
<th className="p-3">Title</th>
<th className="p-3">Company</th>
<th className="p-3">Location</th>
<th className="p-3">Salary</th>
<th className="p-3">Inserted</th>
<th className="p-3"></th>
</tr>
</thead>
<tbody>
{jobs.map((j, idx) => (
<tr key={j?.id ?? idx} className={`border-t border-white/10 ${idx % 2 === 0 ? 'bg-white/[0.02]' : ''} hover:bg-white/[0.06]`}>
<td className="p-3">
<div className="flex items-center gap-2">
{Boolean(j?.isTop5) && <span className="size-2 rounded-full bg-emerald-400"></span>}
<span className="font-medium text-white/90">{j?.title || '—'}</span>
</div>
</td>
<td className="p-3">{j?.company || '—'}</td>
<td className="p-3">{j?.location || '—'}</td>
<td className="p-3">{formatSalary(j?.salary)}</td>
<td className="p-3">{j?.datetimeInserted ? formatDateTime(j.datetimeInserted) : '—'}</td>
<td className="p-3 text-right">
{j?.id ? (
<Link to={`/job/${j.id}`} className="px-3 py-1 rounded-lg bg-white/5 border border-white/10 hover:border-[var(--color-primary)]">View</Link>
) : (
<span className="px-3 py-1 rounded-lg bg-white/5 border border-white/10 opacity-50">View</span>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
|