94 lines
4.5 KiB
JavaScript
94 lines
4.5 KiB
JavaScript
import React from 'react';
|
|
import { Eye, FileText, Calendar, Clock } from 'lucide-react';
|
|
|
|
const SHIFTS = ['Morning Shift', 'Evening Shift', 'Weekend', 'Full Time'];
|
|
const STATES = ['Interested', 'Interview', 'Offer', 'Offer'];
|
|
|
|
export default function MarketOffers({ profile, jobRecs = [] }) {
|
|
const companies = (jobRecs || []).slice(0, 3).map(r => (r.title || 'Company').split(' ')[0]);
|
|
const availability = (profile.availability || [])[0] || 'Available This Week';
|
|
const offers = (jobRecs || []).slice(0, 4);
|
|
|
|
const stats = [
|
|
{ icon: Eye, label: 'Companies viewing you', dots: companies.length ? companies : ['Google', 'Bon Appetit', 'Compass'] },
|
|
{ icon: FileText, label: 'Applications', value: '2 Pending' },
|
|
{ icon: Calendar, label: 'Interviews', value: 'Tomorrow 9AM' },
|
|
{ icon: Clock, label: 'Availability', value: availability },
|
|
];
|
|
|
|
return (
|
|
<section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
|
|
<h2 className="text-[15px] font-semibold text-[#0F172A]">Your Market & Competing Offers</h2>
|
|
|
|
{/* Market stats */}
|
|
<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{stats.map((c) => {
|
|
const Icon = c.icon;
|
|
return (
|
|
<div key={c.label} className="rounded-xl border border-[#E5E7EB] p-4">
|
|
<div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-[#6B7280]">
|
|
<Icon className="w-3.5 h-3.5" /> {c.label}
|
|
</div>
|
|
{c.dots ? (
|
|
<div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
{c.dots.map((co, i) => (
|
|
<span key={i} className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[#0F172A]">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-[#16A34A]" /> {co}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="mt-1 text-[15px] font-semibold text-[#0F172A]">{c.value}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Competing offers */}
|
|
<div className="mt-5 pt-4 border-t border-[#E5E7EB]">
|
|
<p className="text-[13px] font-semibold text-[#0F172A] mb-3">Companies Competing For You</p>
|
|
{offers.length === 0 ? (
|
|
<p className="text-[13px] text-[#6B7280] py-4">No live offers yet — keep leveling up.</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{offers.map((j, i) => {
|
|
const pay = j.pay_range_min || 31;
|
|
const title = (j.title || 'Opportunity').split(' (')[0];
|
|
const state = STATES[i] || 'Interested';
|
|
const shift = SHIFTS[i % SHIFTS.length];
|
|
return (
|
|
<div key={j.id || i} className="rounded-xl border border-[#E5E7EB] p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-[15px] font-semibold text-[#0F172A]">{title}</p>
|
|
<div className="mt-1 flex flex-wrap gap-x-3 text-[12px]">
|
|
<span className="inline-flex items-center gap-1 text-[#0838E0] font-semibold">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-[#0838E0]" /> {state}
|
|
</span>
|
|
<span className="text-[#0F172A] font-medium">${pay}/hr</span>
|
|
<span className="text-[#6B7280]">{shift}</span>
|
|
</div>
|
|
</div>
|
|
{i === 1 && <span className="text-[11px] text-[#94A3B8]">Tomorrow</span>}
|
|
</div>
|
|
<div className="mt-3 flex gap-2">
|
|
<button className="flex-1 text-[12px] font-semibold text-white bg-[#0838E0] rounded-full py-1.5 hover:bg-[#062BAF] transition-colors">
|
|
Accept
|
|
</button>
|
|
<button className="flex-1 text-[12px] font-semibold text-[#0838E0] border border-[#0838E0] rounded-full py-1.5 hover:bg-[#EEF3FE] transition-colors">
|
|
Counter
|
|
</button>
|
|
<button className="text-[12px] font-semibold text-[#94A3B8] border border-[#E5E7EB] rounded-full px-3 py-1.5 hover:text-[#EF4444] hover:border-[#FECACA] transition-colors">
|
|
Decline
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |