75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Briefcase, ChevronDown, Loader2 } from "lucide-react"
|
|
|
|
interface Job {
|
|
job_title: string
|
|
keywords: string[]
|
|
industry: string
|
|
description: string
|
|
}
|
|
|
|
interface JobSelectorProps {
|
|
onSelect: (job: Job | null) => void
|
|
}
|
|
|
|
export function JobSelector({ onSelect }: JobSelectorProps) {
|
|
const [jobs, setJobs] = useState<Job[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [open, setOpen] = useState(false)
|
|
const [selected, setSelected] = useState<Job | null>(null)
|
|
|
|
useEffect(() => {
|
|
fetch("/api/ai/jobs")
|
|
.then((r) => r.json())
|
|
.then((data) => setJobs(data.jobs || []))
|
|
.catch(() => setJobs([]))
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
const handleSelect = (job: Job) => {
|
|
setSelected(job)
|
|
setOpen(false)
|
|
onSelect(job)
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(!open)}
|
|
className="w-full flex items-center gap-2.5 bg-[#1a1d2e] border border-[#ffffff0f] hover:border-primary/30 rounded-xl px-4 py-3 text-sm text-[#9ca3af] hover:text-[#e5e7eb] transition-all duration-200"
|
|
>
|
|
<Briefcase className="h-4 w-4 text-primary flex-none" />
|
|
<span className="flex-1 text-left truncate">
|
|
{selected ? selected.job_title : loading ? "Loading jobs..." : "Select a job category"}
|
|
</span>
|
|
{loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" /> : <ChevronDown className={`h-3.5 w-3.5 text-[#4b5563] transition-transform duration-200 ${open ? "rotate-180" : ""}`} />}
|
|
</button>
|
|
|
|
{open && (
|
|
<>
|
|
<div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
|
|
<div className="absolute top-full left-0 right-0 mt-1.5 z-20 bg-[#1a1d2e] border border-[#ffffff0f] rounded-xl shadow-xl shadow-black/40 max-h-60 overflow-y-auto">
|
|
{jobs.map((job, i) => (
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
onClick={() => handleSelect(job)}
|
|
className="w-full text-left px-4 py-3 text-sm text-[#9ca3af] hover:bg-[#1f2437] hover:text-[#e5e7eb] transition-all duration-150 border-b border-[#ffffff08] last:border-0 border-l-2 border-l-transparent hover:border-l-primary/40"
|
|
>
|
|
<div className="font-medium">{job.job_title}</div>
|
|
<div className="text-xs text-[#4b5563] mt-0.5">{job.industry} — {job.description}</div>
|
|
</button>
|
|
))}
|
|
{jobs.length === 0 && !loading && (
|
|
<div className="px-4 py-4 text-xs text-[#4b5563] text-center">No job categories loaded</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|