171 lines
8.6 KiB
JavaScript
171 lines
8.6 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { Head, Link } from '@inertiajs/react';
|
||
import {
|
||
ArrowLeft,
|
||
Check,
|
||
Save,
|
||
MapPin,
|
||
Briefcase,
|
||
Globe
|
||
} from 'lucide-react';
|
||
|
||
export default function WorkerEditProfile() {
|
||
const commonSkills = [
|
||
{ name: 'Cleaning', icon: '🧼' },
|
||
{ name: 'Mason', icon: '🏗️' },
|
||
{ name: 'Electric', icon: '⚡' },
|
||
{ name: 'Plumb', icon: '🔧' },
|
||
{ name: 'Paint', icon: '🎨' },
|
||
{ name: 'Helper', icon: '📦' }
|
||
];
|
||
const commonAreas = ['Marina', 'Deira', 'Bur Dubai', 'Jebel Ali', 'Al Quoz', 'City'];
|
||
const commonLangs = ['English', 'Arabic', 'Hindi', 'Urdu', 'Tagalog'];
|
||
|
||
const [selectedSkills, setSelectedSkills] = useState(['Cleaning']);
|
||
const [otherSkill, setOtherSkill] = useState('');
|
||
const [showOtherInput, setShowOtherInput] = useState(false);
|
||
const [selectedAreas, setSelectedAreas] = useState(['Deira']);
|
||
const [selectedLangs, setSelectedLangs] = useState(['English']);
|
||
const [saved, setSaved] = useState(false);
|
||
|
||
const toggle = (val, list, setter) => {
|
||
if (list.includes(val)) {
|
||
setter(list.filter(item => item !== val));
|
||
} else {
|
||
setter([...list, val]);
|
||
}
|
||
};
|
||
|
||
const handleSave = () => {
|
||
setSaved(true);
|
||
setTimeout(() => setSaved(false), 2000);
|
||
};
|
||
|
||
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="Quick Edit" />
|
||
|
||
{/* Header */}
|
||
<div className="px-6 pt-12 pb-6 bg-white sticky top-0 z-50 flex items-center justify-between border-b border-slate-50">
|
||
<button onClick={() => window.history.back()} className="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-900 border border-slate-100 active:scale-95 transition-all">
|
||
<ArrowLeft className="w-6 h-6" />
|
||
</button>
|
||
<h1 className="text-sm font-black uppercase tracking-tight">Edit Skills</h1>
|
||
<div className="w-12" />
|
||
</div>
|
||
|
||
<div className="flex-1 px-8 py-8 space-y-12 overflow-y-auto pb-32">
|
||
{/* Work Section */}
|
||
<div className="space-y-6">
|
||
<div className="flex items-center space-x-3">
|
||
<Briefcase className="w-5 h-5 text-[#185FA5]" />
|
||
<h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">My Skills</h2>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{commonSkills.map((skill) => (
|
||
<button
|
||
key={skill.name}
|
||
onClick={() => toggle(skill.name, selectedSkills, setSelectedSkills)}
|
||
className={`p-6 rounded-[32px] border-2 text-center transition-all active:scale-95 flex flex-col items-center space-y-3 ${
|
||
selectedSkills.includes(skill.name)
|
||
? 'bg-[#185FA5] border-[#185FA5] text-white shadow-xl shadow-blue-500/20'
|
||
: 'bg-slate-50 border-slate-50 text-slate-400'
|
||
}`}
|
||
>
|
||
<span className="text-2xl">{skill.icon}</span>
|
||
<span className="text-[10px] font-black uppercase tracking-tight">{skill.name}</span>
|
||
</button>
|
||
))}
|
||
|
||
{/* Other Skill Button */}
|
||
<button
|
||
onClick={() => setShowOtherInput(!showOtherInput)}
|
||
className={`p-6 rounded-[32px] border-2 text-center transition-all active:scale-95 flex flex-col items-center justify-center space-y-3 ${
|
||
showOtherInput || otherSkill
|
||
? 'bg-[#185FA5] border-[#185FA5] text-white shadow-xl shadow-blue-500/20'
|
||
: 'bg-slate-50 border-slate-50 text-slate-400'
|
||
}`}
|
||
>
|
||
<span className="text-2xl">➕</span>
|
||
<span className="text-[10px] font-black uppercase tracking-tight">Other</span>
|
||
</button>
|
||
</div>
|
||
|
||
{showOtherInput && (
|
||
<div className="animate-in fade-in slide-in-from-top-2 duration-300">
|
||
<input
|
||
type="text"
|
||
placeholder="Type your skill..."
|
||
className="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-[11px] font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
||
value={otherSkill}
|
||
onChange={(e) => setOtherSkill(e.target.value)}
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Locations Section */}
|
||
<div className="space-y-6">
|
||
<div className="flex items-center space-x-3">
|
||
<MapPin className="w-5 h-5 text-[#185FA5]" />
|
||
<h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">My Locations</h2>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{commonAreas.map((area) => (
|
||
<button
|
||
key={area}
|
||
onClick={() => toggle(area, selectedAreas, setSelectedAreas)}
|
||
className={`px-6 py-4 rounded-2xl border-2 transition-all active:scale-95 ${
|
||
selectedAreas.includes(area)
|
||
? 'bg-[#185FA5] border-[#185FA5] text-white'
|
||
: 'bg-slate-50 border-slate-50 text-slate-400'
|
||
}`}
|
||
>
|
||
<span className="text-[10px] font-black uppercase tracking-tight">{area}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Languages Section */}
|
||
<div className="space-y-6">
|
||
<div className="flex items-center space-x-3">
|
||
<Globe className="w-5 h-5 text-[#185FA5]" />
|
||
<h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">My Languages</h2>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{commonLangs.map((lang) => (
|
||
<button
|
||
key={lang}
|
||
onClick={() => toggle(lang, selectedLangs, setSelectedLangs)}
|
||
className={`py-4 rounded-2xl border-2 transition-all active:scale-95 ${
|
||
selectedLangs.includes(lang)
|
||
? 'bg-[#185FA5] border-[#185FA5] text-white'
|
||
: 'bg-slate-50 border-slate-50 text-slate-400'
|
||
}`}
|
||
>
|
||
<span className="text-[10px] font-black uppercase tracking-tight">{lang}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Huge Save Button */}
|
||
<div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-8 bg-white/90 backdrop-blur-xl border-t border-slate-50 z-50">
|
||
<button
|
||
onClick={handleSave}
|
||
className={`w-full py-5 rounded-[28px] font-black text-[12px] uppercase tracking-[0.2em] shadow-2xl transition-all flex items-center justify-center space-x-3 active:scale-95 ${
|
||
saved ? 'bg-emerald-500 text-white shadow-emerald-500/20' : 'bg-[#185FA5] text-white shadow-blue-500/20'
|
||
}`}
|
||
>
|
||
{saved ? <Check className="w-6 h-6" /> : <Save className="w-6 h-6" />}
|
||
<span>{saved ? 'Changes Saved!' : 'Update Profile'}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|