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 (
{/* Header */}

Edit Skills

{/* Work Section */}

My Skills

{commonSkills.map((skill) => ( ))} {/* Other Skill Button */}
{showOtherInput && (
setOtherSkill(e.target.value)} autoFocus />
)}
{/* Locations Section */}

My Locations

{commonAreas.map((area) => ( ))}
{/* Languages Section */}

My Languages

{commonLangs.map((lang) => ( ))}
{/* Huge Save Button */}
); }