148 lines
8.6 KiB
JavaScript
148 lines
8.6 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ArrowLeft,
|
|
MoreVertical,
|
|
Briefcase,
|
|
MapPin,
|
|
Users,
|
|
ChevronRight,
|
|
Clock,
|
|
ShieldCheck,
|
|
DollarSign,
|
|
Star,
|
|
Phone,
|
|
Calendar
|
|
} from 'lucide-react';
|
|
|
|
export default function WorkerJobDetail() {
|
|
return (
|
|
<div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden">
|
|
<Head title="Job Details" />
|
|
|
|
{/* Header */}
|
|
<div className="px-6 pt-12 pb-4 bg-white flex items-center justify-between border-b border-slate-50 sticky top-0 z-50">
|
|
<button onClick={() => window.history.back()} className="w-10 h-10 flex items-center justify-center text-slate-900">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</button>
|
|
<h1 className="text-sm font-black uppercase tracking-widest">Details</h1>
|
|
<button className="w-10 h-10 flex items-center justify-center text-slate-900">
|
|
<MoreVertical className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto pb-32">
|
|
{/* Job Icon & Title */}
|
|
<div className="flex flex-col items-center py-10 space-y-6">
|
|
<div className="w-20 h-20 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center shadow-sm">
|
|
<div className="w-14 h-14 rounded-full bg-white shadow-md flex items-center justify-center">
|
|
<Briefcase className="w-8 h-8 text-slate-900" />
|
|
</div>
|
|
</div>
|
|
<div className="text-center space-y-2">
|
|
<h2 className="text-2xl font-black tracking-tight">Driver needed</h2>
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest flex items-center justify-center space-x-1">
|
|
<MapPin className="w-3 h-3" />
|
|
<span>High street avenue London, UK</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/* Stats Grid */}
|
|
<div className="px-6 grid grid-cols-2 gap-4 mb-10">
|
|
<div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
|
|
<div className="w-10 h-10 rounded-2xl bg-blue-50 text-[#185FA5] flex items-center justify-center">
|
|
<DollarSign className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Salary</p>
|
|
<p className="text-xs font-black text-slate-900">$15</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
|
|
<div className="w-10 h-10 rounded-2xl bg-orange-50 text-orange-500 flex items-center justify-center">
|
|
<Clock className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Job type</p>
|
|
<p className="text-xs font-black text-slate-900">Part time</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
|
|
<div className="w-10 h-10 rounded-2xl bg-emerald-50 text-emerald-500 flex items-center justify-center">
|
|
<Star className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Skill</p>
|
|
<p className="text-xs font-black text-slate-900">Expert</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
|
|
<div className="w-10 h-10 rounded-2xl bg-purple-50 text-purple-500 flex items-center justify-center">
|
|
<ShieldCheck className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Payment</p>
|
|
<p className="text-xs font-black text-slate-900">Verified</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="px-6 space-y-4 mb-10">
|
|
<h3 className="font-black text-sm uppercase tracking-tight">Description</h3>
|
|
<p className="text-xs text-slate-500 leading-relaxed font-medium">
|
|
An outstanding executer that consistently delivers more than expected & start mentoring experience man to drive my vehicle safely and efficiently. <span className="text-[#185FA5] font-black uppercase tracking-widest cursor-pointer">Read More</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Additional Details */}
|
|
<div className="px-6 space-y-6">
|
|
<h3 className="font-black text-sm uppercase tracking-tight">Additional details</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-50">
|
|
<div className="flex items-center space-x-3">
|
|
<Briefcase className="w-4 h-4 text-slate-300" />
|
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Offer type</span>
|
|
</div>
|
|
<span className="text-[11px] font-black text-slate-900 uppercase">Contractual</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-50">
|
|
<div className="flex items-center space-x-3">
|
|
<Calendar className="w-4 h-4 text-slate-300" />
|
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Start from</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-[11px] font-black text-slate-900 uppercase block">26 Aug, 2023</span>
|
|
<span className="text-[9px] text-slate-400 font-bold uppercase">9:00 am to 6:00 pm</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-50">
|
|
<div className="flex items-center space-x-3">
|
|
<Phone className="w-4 h-4 text-slate-300" />
|
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Contact</span>
|
|
</div>
|
|
<span className="text-[11px] font-black text-slate-900">(702) 555-0122</span>
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-b border-slate-50">
|
|
<div className="flex items-center space-x-3">
|
|
<Clock className="w-4 h-4 text-slate-300" />
|
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Posted</span>
|
|
</div>
|
|
<span className="text-[11px] font-black text-slate-900 uppercase">2 days ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Apply Button */}
|
|
<div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/90 backdrop-blur-xl border-t border-slate-100 p-6 z-50">
|
|
<button className="w-full bg-[#185FA5] text-white py-5 rounded-[28px] font-black text-[12px] uppercase tracking-[0.2em] shadow-2xl shadow-blue-500/20 active:scale-95 transition-all">
|
|
Apply Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|