{user.name}

{user.email}

\n \n ⭐ {user.rating}/5 rating\n \n \n 📅 {user.total_sessions} sessions completed\n \n \n 🌍 {user.timezone}\n \n

\n setIsEditing(!isEditing)}\n className=\"px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors\"\n >\n {isEditing ? 'Cancel' : 'Edit Profile'}\n \n

\n\n {isEditing ? (\n

\n Name\n setFormData({ ...formData, name: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n required\n />\n

\n Bio\n setFormData({ ...formData, bio: e.target.value })}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n placeholder=\"Tell others about yourself, your interests, and what you're passionate about...\"\n />\n

\n Timezone\n setFormData({ ...formData, timezone: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n >\n \n \n \n \n \n \n \n \n \n \n

\n \n Save Changes\n \n setIsEditing(false)}\n className=\"px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors\"\n >\n Cancel\n \n

\n ) : (\n

{user.bio || \"No bio provided yet.\"}

\n )}\n

\n\n {/* Skills Section */}\n

\n {/* Skills I Can Teach */}\n

\n 🎓 Skills I Can Teach\n

\n {\n setNewSkill({ ...newSkill, type: 'teach' });\n setShowAddSkill(true);\n }}\n className=\"px-3 py-1 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 transition-colors\"\n >\n + Add Skill\n \n

\n {skills.teach.length === 0 ? (\n

No teaching skills added yet.

\n ) : (\n skills.teach.map((skill) => (\n

{skill.name}

\n {skill.category}\n {skill.proficiency_level && (\n \n {skill.proficiency_level}\n \n )}\n

\n {skill.description && (\n

{skill.description}

\n )}\n

\n handleDeleteSkill(skill.id)}\n className=\"text-red-500 hover:text-red-700 text-sm\"\n >\n ✕\n \n

\n ))\n )}\n

\n\n {/* Skills I Want to Learn */}\n

\n 📚 Skills I Want to Learn\n

\n {\n setNewSkill({ ...newSkill, type: 'learn' });\n setShowAddSkill(true);\n }}\n className=\"px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors\"\n >\n + Add Skill\n \n

\n {skills.learn.length === 0 ? (\n

No learning goals added yet.

\n ) : (\n skills.learn.map((skill) => (\n

{skill.name}

\n {skill.category}\n

\n {skill.description && (\n

{skill.description}

\n )}\n

\n handleDeleteSkill(skill.id)}\n className=\"text-red-500 hover:text-red-700 text-sm\"\n >\n ✕\n \n

\n ))\n )}\n

\n\n {/* Add Skill Modal */}\n {showAddSkill && (\n

\n Add New {newSkill.type === 'teach' ? 'Teaching' : 'Learning'} Skill\n

\n Skill Name\n setNewSkill({ ...newSkill, name: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n placeholder=\"e.g., JavaScript, Guitar, Spanish\"\n required\n />\n

\n Category\n setNewSkill({ ...newSkill, category: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n required\n >\n \n {skillCategories.map((category) => (\n \n ))}\n \n

\n {newSkill.type === 'teach' && (\n

\n Proficiency Level\n setNewSkill({ ...newSkill, proficiency_level: e.target.value as any })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n >\n \n \n \n \n \n

\n )}\n

\n Description\n setNewSkill({ ...newSkill, description: e.target.value })}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n placeholder=\"Describe your experience or learning goals...\"\n />\n

\n \n Add Skill\n \n setShowAddSkill(false)}\n className=\"flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors\"\n >\n Cancel\n \n

\n )}\n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/Cess/skillswapapappforcommunityskillexchange/code/frontend/components/UserProfile.tsx","extension","actionData","errors"]