Profile Settings

\n Manage your profile information and showcase your skills\n

\n\n {/* Profile Completion */}\n

Profile Completion

\n {getCompletionPercentage()}%\n

\n Complete your profile to attract more {user.user_type === 'freelancer' ? 'clients' : 'freelancers'}\n

\n\n {/* Success/Error Messages */}\n {success && (\n

\n ✅\n {success}\n

\n )}\n\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n\n

\n {/* Profile Card */}\n

\n {user.name.charAt(0).toUpperCase()}\n

{user.name}

\n {user.title && (\n

{user.title}

\n )}\n

\n \n {user.user_type === 'freelancer' ? 'Freelancer' : 'Client'}\n \n

\n\n

\n {user.location && (\n

\n 📍\n {user.location}\n

\n )}\n\n {user.hourly_rate && user.user_type === 'freelancer' && (\n

\n 💰\n ${user.hourly_rate}/hour\n

\n )}\n\n {user.portfolio_url && (\n

\n 🔗\n \n Portfolio\n \n

\n )}\n\n

\n 📧\n {user.email}\n

\n\n

\n 📅\n \n Joined {new Date(user.created_at).toLocaleDateString()}\n \n

\n\n {getSkills().length > 0 && (\n

Skills

\n {getSkills().slice(0, 6).map((skill, index) => (\n \n {skill}\n \n ))}\n {getSkills().length > 6 && (\n +{getSkills().length - 6} more\n )}\n

\n )}\n

\n\n {/* Profile Form */}\n

Profile Information

\n {!editing && (\n setEditing(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors\"\n >\n Edit Profile\n \n )}\n

\n\n {editing ? (\n

\n \n Full Name *\n \n \n

\n\n

\n \n Professional Title\n \n \n

\n\n

\n \n Bio\n \n \n

\n\n

\n \n Skills\n \n \n

Separate skills with commas

\n\n

\n \n Location\n \n \n

\n\n {user.user_type === 'freelancer' && (\n

\n \n Hourly Rate ($)\n \n \n

\n )}\n

\n\n {user.user_type === 'freelancer' && (\n

\n \n Portfolio URL\n \n \n

\n )}\n\n

\n {\n setEditing(false);\n setError('');\n setSuccess('');\n }}\n className=\"flex-1 bg-gray-300 text-gray-700 py-3 px-4 rounded-lg font-medium hover:bg-gray-400 transition-colors\"\n >\n Cancel\n \n \n {loading ? 'Saving...' : 'Save Changes'}\n \n

\n ) : (\n

About

\n {user.bio || 'No bio provided yet.'}\n

\n\n {getSkills().length > 0 && (\n

Skills & Expertise

\n {getSkills().map((skill, index) => (\n \n {skill}\n \n ))}\n

\n )}\n\n

Contact Information

Email: {user.email}

\n {user.location &&

Location: {user.location}

}\n

\n\n {user.user_type === 'freelancer' && (\n

Professional Details

\n {user.hourly_rate &&

Rate: ${user.hourly_rate}/hour

}\n {user.portfolio_url && (\n

\n Portfolio: \n \n View Portfolio\n \n

\n )}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Sandra_Ozumba/Freelance101/code/frontend/components/UserProfile.tsx","extension","actionData","errors"]