\n {/* Header */}\n

🎯 AI-Powered Skill Matching

\n Find the perfect teachers for your learning journey. Our AI analyzes compatibility, \n teaching styles, and mutual learning opportunities.\n

\n\n {/* Skill Selection */}\n

Select Skills to Learn

\n \n {/* Current Learning Skills */}\n

Your Learning Goals

\n {learningSkills.map((skill) => (\n \n selectedSkills.includes(skill.name)\n ? removeSkillToLearn(skill.name)\n : addSkillToLearn(skill.name)\n }\n >\n {skill.name}\n {selectedSkills.includes(skill.name) && ' ✓'}\n

\n ))}\n

\n\n {/* AI Recommendations */}\n

AI Recommendations for You

\n {isLoadingRecommendations ? (\n

\n Getting personalized recommendations...\n

\n ) : (\n

\n {recommendations.slice(0, 8).map((skill) => (\n addSkillToLearn(skill)}\n className=\"px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium hover:bg-blue-200 transition-colors\"\n disabled={selectedSkills.includes(skill)}\n >\n {skill} +\n \n ))}\n

\n )}\n

\n\n {/* Search for Skills */}\n

Search for Skills

\n setSearchQuery(e.target.value)}\n placeholder=\"Search for skills to learn...\"\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n />\n {\n if (searchQuery.trim() && !selectedSkills.includes(searchQuery.trim())) {\n addSkillToLearn(searchQuery.trim());\n setSearchQuery('');\n }\n }}\n className=\"px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors\"\n >\n Add\n \n

\n {filteredRecommendations.length > 0 && searchQuery && (\n

\n {filteredRecommendations.slice(0, 5).map((skill) => (\n {\n addSkillToLearn(skill);\n setSearchQuery('');\n }}\n className=\"px-2 py-1 bg-gray-100 text-gray-700 rounded text-sm hover:bg-gray-200 transition-colors\"\n >\n {skill}\n \n ))}\n

\n )}\n

\n\n {/* Selected Skills */}\n {selectedSkills.length > 0 && (\n

Selected Skills ({selectedSkills.length})

\n {selectedSkills.map((skill) => (\n \n {skill}\n removeSkillToLearn(skill)}\n className=\"text-purple-200 hover:text-white\"\n >\n ✕\n \n

\n ))}\n

\n )}\n\n {/* Find Matches Button */}\n \n {isLoading ? (\n

\n Finding Perfect Matches...\n

\n ) : (\n `🎯 Find Matches for ${selectedSkills.length} Skill${selectedSkills.length !== 1 ? 's' : ''}`\n )}\n \n \n\n {/* Matches Results */}\n {matches.length > 0 && (\n

\n 🎉 Found {matches.length} Perfect Match{matches.length !== 1 ? 'es' : ''}\n

\n {matches.map((match, index) => (\n

\n {match.teacher.name.charAt(0).toUpperCase()}\n

{match.teacher.name}

\n ⭐ {match.teacher.rating}/5\n •\n {match.teacher.total_sessions} sessions\n

\n {match.compatibilityScore}%\n

compatibility

\n\n

{match.skill.name}

\n {match.skill.proficiency_level && (\n

\n Level: {match.skill.proficiency_level}\n

\n )}\n

\n\n

AI Analysis:

{match.reasoning}

\n\n {match.skill.description && (\n

Teaching Approach:

{match.skill.description}

\n )}\n\n createMatch(\n match.teacher.id,\n match.skill.name,\n match.compatibilityScore,\n match.reasoning\n )}\n className=\"w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors\"\n >\n Send Match Request\n \n

\n ))}\n

\n )}\n\n {/* No Matches State */}\n {matches.length === 0 && !isLoading && selectedSkills.length > 0 && (\n

🔍

No matches found yet

\n Try adjusting your skill selection or check back later as new teachers join the platform.\n

\n \n Search Again\n \n

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