110 lines
6.7 KiB
JavaScript
110 lines
6.7 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
|
|
import {
|
|
Bookmark,
|
|
MessageSquare,
|
|
X,
|
|
Briefcase,
|
|
DollarSign,
|
|
Star,
|
|
Globe2,
|
|
ArrowRight
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerShortlist() {
|
|
const savedWorkers = [
|
|
{ id: 1, name: 'Maria Santos', role: 'Housemaid', rating: '4.9', salary: '1,800 AED', nationality: 'Philippines', img: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Maria', exp: '8 Years' },
|
|
{ id: 2, name: 'Elena Gilbert', role: 'Nanny', rating: '4.8', salary: '2,500 AED', nationality: 'Kenya', img: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Elena', exp: '5 Years' },
|
|
];
|
|
|
|
return (
|
|
<EmployerMobileLayout>
|
|
<Head title="Shortlist" />
|
|
|
|
<div className="p-6 space-y-8">
|
|
{/* Header */}
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-bold tracking-tight">Shortlist</h1>
|
|
<p className="text-sm text-slate-500 font-medium">Quick access to your saved candidates</p>
|
|
</div>
|
|
|
|
{savedWorkers.length > 0 ? (
|
|
<div className="space-y-4 pb-10">
|
|
<div className="flex items-center justify-between px-1">
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{savedWorkers.length} Saved Profiles</span>
|
|
<button className="text-[10px] font-bold text-rose-500 uppercase tracking-widest">Clear All</button>
|
|
</div>
|
|
|
|
{savedWorkers.map((worker) => (
|
|
<div key={worker.id} className="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm space-y-5">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-16 h-16 rounded-2xl bg-slate-50 overflow-hidden border border-slate-200">
|
|
<img src={worker.img} alt="worker" className="w-full h-full object-cover" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h4 className="font-bold text-slate-900 text-base">{worker.name}</h4>
|
|
<div className="flex items-center space-x-2 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
|
|
<Globe2 className="w-3 h-3" />
|
|
<span>{worker.nationality}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button className="w-9 h-9 rounded-xl bg-slate-50 flex items-center justify-center text-slate-300 hover:text-rose-500 transition-colors border border-slate-100">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="flex items-center space-x-2 text-[11px] font-bold text-slate-600 bg-slate-50 px-3 py-2.5 rounded-xl border border-slate-100">
|
|
<Briefcase className="w-3.5 h-3.5 text-slate-400" />
|
|
<span>{worker.exp}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-[11px] font-bold text-slate-600 bg-slate-50 px-3 py-2.5 rounded-xl border border-slate-100">
|
|
<DollarSign className="w-3.5 h-3.5 text-emerald-500" />
|
|
<span>{worker.salary}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3 pt-2">
|
|
<Link
|
|
href={`/mobile/employer/workers/${worker.id}`}
|
|
className="flex-1 py-4 bg-[#141B34] text-white rounded-2xl font-bold text-sm shadow-xl shadow-slate-900/10 active:scale-95 transition-all text-center"
|
|
>
|
|
View Profile
|
|
</Link>
|
|
<div className="flex items-center space-x-1 px-4 py-4 bg-amber-50 rounded-2xl border border-amber-100">
|
|
<Star className="w-4 h-4 text-amber-500 fill-amber-500" />
|
|
<span className="text-sm font-bold text-amber-700">{worker.rating}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div className="pt-4">
|
|
<button className="w-full h-16 bg-white border-2 border-slate-100 text-[#141B34] rounded-2xl font-bold text-sm flex items-center justify-center space-x-2 shadow-sm active:scale-95 transition-all">
|
|
<MessageSquare className="w-5 h-5" />
|
|
<span>Message All</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 flex flex-col items-center justify-center space-y-6 pt-20">
|
|
<div className="w-24 h-24 bg-white border border-slate-100 rounded-[40px] flex items-center justify-center shadow-sm">
|
|
<Bookmark className="w-10 h-10 text-slate-100" />
|
|
</div>
|
|
<div className="text-center space-y-2 px-10">
|
|
<h3 className="text-lg font-bold tracking-tight">Your Shortlist is Empty</h3>
|
|
<p className="text-sm text-slate-400 font-medium">Save profiles to compare and hire faster.</p>
|
|
</div>
|
|
<Link href="/mobile/employer/workers" className="px-10 py-4 bg-[#141B34] text-white rounded-2xl font-bold text-sm shadow-lg active:scale-95 transition-all">
|
|
Browse Workers
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</EmployerMobileLayout>
|
|
);
|
|
}
|