Krow/krow_talent_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Aravind
2026-08-07 23:53:15 +05:30
commit 90f14a73b2
222 changed files with 35000 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/krow/talent/MarketOffers.jsx Normal file
View File

@@ -0,0 +1,94 @@
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-[#0A39DF] font-semibold">
<span className="w-1.5 h-1.5 rounded-full bg-[#0A39DF]" /> {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-[#0A39DF] rounded-full py-1.5 hover:bg-[#082EB4] transition-colors">
Accept
</button>
<button className="flex-1 text-[12px] font-semibold text-[#0A39DF] border border-[#0A39DF] rounded-full py-1.5 hover:bg-[#EFF6FF] 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>
);
}