252 lines
16 KiB
JavaScript
252 lines
16 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { Head, Link } from '@inertiajs/react';
|
||
import {
|
||
Home,
|
||
Search,
|
||
Bell,
|
||
Bookmark,
|
||
ChevronDown,
|
||
MessageCircle,
|
||
User,
|
||
Briefcase,
|
||
Compass,
|
||
Globe
|
||
} from 'lucide-react';
|
||
|
||
export default function WorkerHome() {
|
||
const [isOpenToWork, setIsOpenToWork] = useState(true);
|
||
const [showLangDropdown, setShowLangDropdown] = useState(false);
|
||
const [currentLang, setCurrentLang] = useState('EN');
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#F9F9F9] font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden pb-24">
|
||
<Head title="Home" />
|
||
|
||
{/* Header Area */}
|
||
<div className="px-4 pt-12 pb-4 space-y-6 flex-shrink-0">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-full bg-slate-200 border-2 border-white shadow-sm overflow-hidden">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Danial" alt="avatar" />
|
||
</div>
|
||
<div className="text-left">
|
||
<p className="text-[10px] text-slate-400 font-bold">Hi, Danial</p>
|
||
<button className="flex items-center space-x-1">
|
||
<span className="text-xs font-black text-slate-900">92 High street, London</span>
|
||
<ChevronDown className="w-3 h-3 text-slate-400" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-3">
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setShowLangDropdown(!showLangDropdown)}
|
||
className="flex items-center space-x-2 bg-white px-3 py-2 rounded-2xl shadow-sm border border-slate-50 active:scale-95 transition-all"
|
||
>
|
||
<Globe className="w-4 h-4 text-[#185FA5]" />
|
||
<span className="text-[9px] font-black uppercase tracking-widest text-slate-900">{currentLang}</span>
|
||
</button>
|
||
|
||
{showLangDropdown && (
|
||
<div className="absolute top-12 right-0 w-40 bg-white rounded-[24px] shadow-2xl border border-slate-100 py-3 z-[100] animate-in fade-in zoom-in duration-200">
|
||
{['English', 'Arabic', 'Tagalog', 'Swahili', 'Hindi'].map((lang) => (
|
||
<button
|
||
key={lang}
|
||
onClick={() => {
|
||
setCurrentLang(lang === 'English' ? 'EN' : lang.substring(0, 2).toUpperCase());
|
||
setShowLangDropdown(false);
|
||
}}
|
||
className="w-full px-6 py-3 text-left hover:bg-slate-50 flex items-center justify-between group"
|
||
>
|
||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-400 group-hover:text-[#185FA5] transition-colors">{lang}</span>
|
||
{currentLang === (lang === 'English' ? 'EN' : lang.substring(0, 2).toUpperCase()) && (
|
||
<div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<button className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-slate-400 shadow-sm border border-slate-50 relative">
|
||
<Bell className="w-4 h-4" />
|
||
<div className="absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Search Bar */}
|
||
<div className="relative">
|
||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
||
<input
|
||
type="text"
|
||
placeholder="Search for Job, Recruiter..."
|
||
className="w-full pl-12 pr-12 py-3.5 bg-white border-none rounded-2xl text-[11px] font-medium shadow-sm focus:ring-2 focus:ring-blue-100 outline-none"
|
||
/>
|
||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||
<span className="text-sm">⚡</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto px-4 space-y-8">
|
||
{/* Open to Work Card */}
|
||
<button
|
||
onClick={() => setIsOpenToWork(!isOpenToWork)}
|
||
className={`w-full p-6 rounded-[32px] flex items-center justify-between transition-all duration-500 active:scale-[0.98] ${
|
||
isOpenToWork ? 'bg-[#185FA5] text-white shadow-xl shadow-blue-500/20' : 'bg-white text-slate-400 border border-slate-100'
|
||
}`}
|
||
>
|
||
<div className="text-left space-y-1">
|
||
<p className={`text-[9px] font-black uppercase tracking-widest ${isOpenToWork ? 'text-blue-100' : 'text-slate-300'}`}>Availability</p>
|
||
<h3 className="text-base font-black tracking-tight uppercase">Open to Work</h3>
|
||
</div>
|
||
<div className={`w-12 h-7 rounded-full relative transition-colors duration-300 ${isOpenToWork ? 'bg-white/20' : 'bg-slate-100'}`}>
|
||
<div className={`absolute top-1 w-5 h-5 rounded-full transition-all duration-300 shadow-md ${
|
||
isOpenToWork ? 'right-1 bg-white' : 'left-1 bg-white'
|
||
}`} />
|
||
</div>
|
||
</button>
|
||
|
||
{/* Job Offers Horizontal */}
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between px-1">
|
||
<h3 className="font-black text-sm uppercase tracking-tight text-slate-900">Job offers</h3>
|
||
<button className="text-[10px] font-black text-[#185FA5] uppercase tracking-widest">See all</button>
|
||
</div>
|
||
|
||
<div className="flex space-x-4 overflow-x-auto pb-4 no-scrollbar -mx-4 px-4">
|
||
{[
|
||
{ id: 1, title: 'Driver needed', salary: '$15', icon: '🚗', bg: 'bg-blue-50' },
|
||
{ id: 2, title: 'Mason needed', salary: '$25', icon: '🏗️', bg: 'bg-emerald-50' }
|
||
].map((offer) => (
|
||
<Link key={offer.id} href="/mobile/worker/job/detail" className={`${offer.bg} p-6 rounded-[32px] w-[240px] shrink-0 space-y-4 shadow-sm active:scale-95 transition-all block border border-white/50`}>
|
||
<div className="flex items-center justify-between">
|
||
<div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-xl shadow-sm">
|
||
{offer.icon}
|
||
</div>
|
||
<p className="text-sm font-black text-slate-900">{offer.salary}</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<h4 className="font-black text-slate-900 text-xs uppercase tracking-tight">{offer.title}</h4>
|
||
<p className="text-[9px] text-slate-500 font-bold uppercase tracking-tight">High street avenue London, UK</p>
|
||
<p className="text-[9px] text-[#185FA5] font-black uppercase">From Fri, 17 Dec</p>
|
||
</div>
|
||
<span className="inline-block bg-black text-white px-4 py-1.5 rounded-full text-[8px] font-black uppercase tracking-tight">Part time</span>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Employer Requests - Compact List */}
|
||
<div className="space-y-4">
|
||
<div className="px-1 flex items-center justify-between">
|
||
<h2 className="text-[12px] font-black uppercase tracking-[0.15em] text-slate-400">Employer Requests</h2>
|
||
<span className="bg-[#185FA5]/10 text-[#185FA5] px-2.5 py-1 rounded-lg text-[9px] font-black uppercase">2 Pending</span>
|
||
</div>
|
||
<div className="space-y-3">
|
||
{[
|
||
{ id: 1, employer: 'Al Mansoori Group', role: 'Project Mason', img: 'https://api.dicebear.com/7.x/initials/svg?seed=AM' },
|
||
{ id: 2, employer: 'Marina Cleaners', role: 'Deep Cleaning', img: 'https://api.dicebear.com/7.x/initials/svg?seed=MC' }
|
||
].map((req) => (
|
||
<div key={req.id} className="bg-white p-4 rounded-3xl border border-slate-50 shadow-sm flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center overflow-hidden border border-slate-100 shrink-0">
|
||
<img src={req.img} alt="employer" className="w-full h-full object-cover" />
|
||
</div>
|
||
<div>
|
||
<h4 className="font-black text-slate-900 text-xs uppercase tracking-tight leading-none mb-1.5">{req.employer}</h4>
|
||
<p className="text-[9px] font-bold text-[#185FA5] uppercase tracking-widest">{req.role}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<button className="w-8 h-8 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center active:scale-90 transition-all">
|
||
<span className="text-[10px] font-black">✓</span>
|
||
</button>
|
||
<button className="w-8 h-8 bg-rose-50 text-rose-400 rounded-lg flex items-center justify-center active:scale-90 transition-all">
|
||
<span className="text-[10px] font-black text-lg">×</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Recent Job Post - Compact & Professional */}
|
||
<div className="space-y-6 pb-12">
|
||
<div className="flex items-center justify-between px-1">
|
||
<h2 className="text-[12px] font-black uppercase tracking-[0.15em] text-slate-400">Recent job post</h2>
|
||
<button className="text-[10px] font-black uppercase tracking-widest text-[#185FA5]">See All</button>
|
||
</div>
|
||
|
||
{/* Category Tabs */}
|
||
<div className="flex overflow-x-auto space-x-2 no-scrollbar pb-2 -mx-4 px-4">
|
||
{['Cleaner', 'Driver', 'Mason', 'Electrician'].map((cat) => (
|
||
<button key={cat} className="bg-white px-5 py-3 rounded-2xl flex items-center space-x-2 shrink-0 border border-slate-100 active:scale-95 transition-all">
|
||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-400">{cat}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Job Cards - Refined & Compact */}
|
||
<div className="space-y-3">
|
||
{[
|
||
{ title: 'Home Cleaning', salary: '$20', loc: 'Marina, Dubai', icon: '🧼', time: '2h ago' },
|
||
{ title: 'Mason Worker', salary: '$30', loc: 'Deira, Dubai', icon: '🏗️', time: '4h ago' },
|
||
{ title: 'Plumbing Service', salary: '$45', loc: 'Al Barsha', icon: '🔧', time: '5h ago' }
|
||
].map((job, i) => (
|
||
<Link
|
||
key={i}
|
||
href="/mobile/worker/job/detail"
|
||
className="bg-white p-5 rounded-[28px] border border-slate-50 shadow-sm flex items-center justify-between active:scale-[0.98] transition-all group"
|
||
>
|
||
<div className="flex items-center space-x-4">
|
||
<div className="w-11 h-11 bg-slate-50 rounded-2xl flex items-center justify-center text-xl group-hover:bg-blue-50 transition-colors">
|
||
{job.icon}
|
||
</div>
|
||
<div className="space-y-1">
|
||
<h4 className="font-black text-slate-900 text-sm uppercase tracking-tight leading-none">{job.title}</h4>
|
||
<div className="flex items-center space-x-2">
|
||
<p className="text-[9px] font-bold text-slate-300 uppercase tracking-widest">{job.loc}</p>
|
||
<span className="w-0.5 h-0.5 bg-slate-200 rounded-full" />
|
||
<p className="text-[9px] font-bold text-slate-300 uppercase tracking-widest">{job.time}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<p className="text-sm font-black text-[#185FA5] leading-none mb-1">{job.salary}</p>
|
||
<p className="text-[8px] font-black text-emerald-500 uppercase tracking-[0.2em] leading-none">Verified</p>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Navigation */}
|
||
<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 px-6 py-4 flex items-center justify-between z-50">
|
||
<Link href="/mobile/worker/home" className="flex flex-col items-center space-y-1 text-[#185FA5]">
|
||
<Home className="w-5 h-5 fill-current" />
|
||
<span className="text-[8px] font-black uppercase tracking-tight">Home</span>
|
||
</Link>
|
||
<Link href="/mobile/worker/explore" className="flex flex-col items-center space-y-1 text-slate-300">
|
||
<Compass className="w-5 h-5" />
|
||
<span className="text-[8px] font-black uppercase tracking-tight">Explore</span>
|
||
</Link>
|
||
<Link href="/mobile/worker/announcements" className="flex flex-col items-center space-y-1 text-slate-300">
|
||
<Bell className="w-5 h-5" />
|
||
<span className="text-[8px] font-black uppercase tracking-tight">Updates</span>
|
||
</Link>
|
||
<Link href="/mobile/worker/chat" className="flex flex-col items-center space-y-1 text-slate-300">
|
||
<MessageCircle className="w-5 h-5" />
|
||
<span className="text-[8px] font-black uppercase tracking-tight">Chat</span>
|
||
</Link>
|
||
<Link href="/mobile/worker/profile" className="flex flex-col items-center space-y-1 text-slate-300">
|
||
<User className="w-5 h-5" />
|
||
<span className="text-[8px] font-black uppercase tracking-tight">Profile</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|