Loading SkillSwap AI...

Connecting you with amazing learning opportunities

\n );\n }\n\n const tabs = [\n { id: 'dashboard', name: 'Dashboard', icon: '🏠' },\n { id: 'profile', name: 'Profile', icon: '👤' },\n { id: 'matcher', name: 'Find Matches', icon: '🎯' },\n { id: 'sessions', name: 'Sessions', icon: '📅' },\n { id: 'progress', name: 'Progress', icon: '📈' },\n { id: 'community', name: 'Community', icon: '💬' }\n ];\n\n const renderTabContent = () => {\n if (!currentUser) return null;\n\n switch (currentTab) {\n case 'dashboard':\n return ;\n case 'profile':\n return ;\n case 'matcher':\n return ;\n case 'sessions':\n return ;\n case 'progress':\n return ;\n case 'community':\n return ;\n default:\n return ;\n }\n };\n\n return (\n

\n {/* Header */}\n

🎯 SkillSwap AI

\n \n Beta\n \n

\n {currentUser && (\n

{currentUser.name}

⭐ {currentUser.rating} • {currentUser.total_sessions} sessions

\n 👤\n

\n )}\n

\n\n {/* Navigation */}\n

\n {tabs.map((tab) => (\n setCurrentTab(tab.id as TabType)}\n className={`flex items-center space-x-2 py-4 px-2 border-b-2 font-medium text-sm whitespace-nowrap ${\n currentTab === tab.id\n ? 'border-purple-500 text-purple-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.icon}\n {tab.name}\n \n ))}\n

\n\n {/* Main Content */}\n

\n {renderTabContent()}\n

\n );\n}\n\n// Dashboard Component\nfunction Dashboard({ user, onNavigate }: { user: User; onNavigate: (tab: TabType) => void }) {\n const stats = [\n { label: 'Sessions Completed', value: user.total_sessions, icon: '✅' },\n { label: 'Average Rating', value: `${user.rating}/5`, icon: '⭐' },\n { label: 'Skills Teaching', value: '5', icon: '🎓' },\n { label: 'Skills Learning', value: '3', icon: '📚' }\n ];\n\n const quickActions = [\n { label: 'Find New Matches', action: () => onNavigate('matcher'), icon: '🎯', color: 'bg-blue-500' },\n { label: 'Schedule Session', action: () => onNavigate('sessions'), icon: '📅', color: 'bg-green-500' },\n { label: 'Update Profile', action: () => onNavigate('profile'), icon: '👤', color: 'bg-purple-500' },\n { label: 'Join Community', action: () => onNavigate('community'), icon: '💬', color: 'bg-orange-500' }\n ];\n\n return (\n

\n {/* Welcome Section */}\n

\n Welcome back, {user.name}! 👋\n

\n Ready to learn something new or share your expertise? Let's make today productive!\n

\n\n {/* Stats Grid */}\n

\n {stats.map((stat, index) => (\n

{stat.icon}

{stat.value}

{stat.label}

\n ))}\n

\n\n {/* Quick Actions */}\n

Quick Actions

\n {quickActions.map((action, index) => (\n \n

{action.icon}

{action.label}

\n \n ))}\n

\n\n {/* Recent Activity */}\n

Recent Activity

🎯

New match found for JavaScript!

Sarah Chen wants to learn from you

2h ago

📅

Session completed: Python Basics

Great session with Mike Rodriguez

1d ago

💬

New comment on your post

\"Tips for Learning Guitar\" received 3 new comments

2d ago

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