+ {results.map((job) => {
+ const key = jobKey(job);
+ const isSelected = key === selectedJobId;
+ const isChecked = selectedJobIds.has(key);
+ const description = job.jobDescription ? clampText(stripHtml(job.jobDescription)) : "No description.";
+
+ return (
+
setSelectedJobId(key)}
+ onKeyDown={(event) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ setSelectedJobId(key);
+ }
+ }}
+ className={cn(
+ "flex w-full items-start gap-4 px-4 py-3 text-left transition-colors",
+ isSelected ? "bg-muted/40" : "hover:bg-muted/30",
+ )}
+ aria-pressed={isSelected}
+ >
+
event.stopPropagation()}
+ onKeyDown={(event) => event.stopPropagation()}
+ role="presentation"
+ >
+ {
+ setSelectedJobIds((current) => {
+ const next = new Set(current);
+ if (checked) {
+ next.add(key);
+ } else {
+ next.delete(key);
+ }
+ return next;
+ });
+ }}
+ aria-label={`Select ${job.title}`}
+ />
+
+
+
+
+
+
+
{job.title}
+
{job.employer}
+
+
{description}
+
+ {job.location && (
+
+
+ {job.location}
+
+ )}
+ {job.salary && (
+
+
+ {job.salary}
+
+ )}
+ {job.deadline && (
+
+
+ {formatDate(job.deadline)}
+
+ )}
+
+
+ {job.jobType && (
+
+ {job.jobType}
+
+ )}
+ {job.jobLevel && (
+
+ {job.jobLevel}
+
+ )}
+
+
+