172 lines
9.8 KiB
JavaScript
172 lines
9.8 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
Home,
|
|
MessageCircle,
|
|
User,
|
|
Briefcase,
|
|
Bell,
|
|
ArrowLeft,
|
|
Pencil,
|
|
Star,
|
|
FileText,
|
|
Download,
|
|
MapPin,
|
|
Settings,
|
|
ChevronRight,
|
|
Compass,
|
|
Clock,
|
|
ShieldCheck
|
|
} from 'lucide-react';
|
|
|
|
export default function WorkerProfile() {
|
|
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 pb-24">
|
|
<Head title="Profile" />
|
|
|
|
{/* 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">Profile</h1>
|
|
<Link href="/mobile/worker/profile/edit" className="w-10 h-10 flex items-center justify-center text-slate-900">
|
|
<Pencil className="w-5 h-5" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{/* Profile Header */}
|
|
<div className="flex flex-col items-center py-8 space-y-4">
|
|
<div className="w-28 h-28 rounded-full bg-slate-100 overflow-hidden border-4 border-slate-50 shadow-sm">
|
|
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Danial" alt="avatar" className="w-full h-full object-cover" />
|
|
</div>
|
|
<div className="text-center space-y-1 px-10">
|
|
<h2 className="text-2xl font-black tracking-tight">Danial Donald</h2>
|
|
<p className="text-xs text-slate-400 font-bold leading-relaxed">
|
|
4901 Thornridge Cir. Shiloh, Hawaii 81063
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Bar */}
|
|
<div className="px-6 grid grid-cols-3 gap-3 mb-10">
|
|
<div className="bg-[#F9F9F9] p-5 rounded-3xl flex flex-col items-center justify-center space-y-1">
|
|
<p className="text-lg font-black">12</p>
|
|
<p className="text-[10px] text-slate-400 font-black uppercase tracking-widest">Complete</p>
|
|
</div>
|
|
<div className="bg-[#F9F9F9] p-5 rounded-3xl flex flex-col items-center justify-center space-y-1">
|
|
<div className="flex items-center space-x-1">
|
|
<p className="text-lg font-black">4.8</p>
|
|
<Star className="w-4 h-4 text-amber-400 fill-current" />
|
|
</div>
|
|
<p className="text-[10px] text-slate-400 font-black uppercase tracking-widest">Ratings</p>
|
|
</div>
|
|
<div className="bg-[#F9F9F9] p-5 rounded-3xl flex flex-col items-center justify-center space-y-1">
|
|
<p className="text-lg font-black">$ 50</p>
|
|
<p className="text-[10px] text-slate-400 font-black uppercase tracking-widest">Salary</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Sections */}
|
|
<div className="px-6 space-y-10 pb-10">
|
|
<div className="space-y-3">
|
|
<h3 className="font-black text-base uppercase tracking-tight">About Danial</h3>
|
|
<p className="text-sm text-slate-500 leading-relaxed font-medium">
|
|
I am Danial Donald, a passionate professional with over 10 years of experience. Specialized in high-quality service and customer satisfaction.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-6">
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Gender:</p>
|
|
<p className="text-sm font-black text-slate-900 uppercase">Male</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Age:</p>
|
|
<p className="text-sm font-black text-slate-900 uppercase">32 years</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Experience:</p>
|
|
<p className="text-sm font-black text-slate-900 uppercase">Expert (10y)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Expertise</p>
|
|
<p className="text-sm font-black text-slate-900 uppercase tracking-tight">Plumbing, Cleaning, Electrician</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Languages</p>
|
|
<div className="flex flex-wrap gap-2.5 pt-1">
|
|
{['English', 'Arabic', 'Tagalog', 'Swahili'].map((lang) => (
|
|
<span key={lang} className="px-4 py-2 bg-slate-50 text-slate-500 rounded-full text-[10px] font-black uppercase tracking-widest border border-slate-100 shadow-sm">
|
|
{lang}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="font-black text-base uppercase tracking-tight">My Documents</h3>
|
|
<div className="bg-[#F9F9F9] p-8 rounded-[40px] border border-slate-100 shadow-sm space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-12 h-12 bg-blue-50 text-[#185FA5] rounded-2xl flex items-center justify-center">
|
|
<FileText className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-black text-slate-900 uppercase">Passport.JPG</p>
|
|
<p className="text-[10px] text-emerald-500 font-black uppercase tracking-widest">Verified</p>
|
|
</div>
|
|
</div>
|
|
<ShieldCheck className="w-6 h-6 text-emerald-500" />
|
|
</div>
|
|
|
|
<div className="pt-6 border-t border-white grid grid-cols-2 gap-6">
|
|
<div>
|
|
<p className="text-[9px] text-slate-300 font-black uppercase tracking-widest leading-none mb-1.5">Passport No</p>
|
|
<p className="text-xs font-black text-slate-700">Z12345678</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] text-slate-300 font-black uppercase tracking-widest leading-none mb-1.5">Expiry Date</p>
|
|
<p className="text-xs font-black text-slate-700">12/12/2028</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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-slate-300">
|
|
<Home className="w-5 h-5" />
|
|
<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-[#185FA5]">
|
|
<User className="w-5 h-5 fill-current" />
|
|
<span className="text-[8px] font-black uppercase tracking-tight">Profile</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|