{/* HEADER */}

Knowledge Exchange

Professional skill sharing

{!user ? ( ) : ( )}

{/* FEED */} {/* MEMBER RAIL (Social Surface) */} {isMultiplayer && (members?.length ?? 0) > 0 && (

Crew

{(members || []).map((m) => (

m.handle && openProfile(m.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', minWidth: 56 }} >

{(m.displayName || m.name || 'User').split(' ')[0]}

))}

)}

{(sortedCards || []).length === 0 && !(displayCards || []).length ? (

✨

No sparks yet. Be the first!

) : (

{(sortedCards || []).map((card, i) => { const isConnecting = connectingTo === card.id; return (

{/* Content */}

🎓 I can teach

{card.teach}

🌱 I want to learn

{card.learn}

{/* Footer & Action */}

{ e.stopPropagation(); if(card._user?.handle) openProfile(card._user.handle); }} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '4px' }} >

e.currentTarget.style.display = 'none'} />

{card._user?.displayName?.split(' ')[0] || 'Unknown'}

{/* Demo Badge */} {card.isDemo && (

DEMO

)}

); })}

)}

{/* FAB */}

{/* TOAST */}

{showToast}

{/* CREATION MODAL (Bottom Sheet) */}

Create Request

🎓 I CAN TEACH... setTeachInput(e.target.value)} placeholder="e.g. React basics, Baking bread" style={{ width: '100%', height: 56, fontSize: 16, fontWeight: 600, padding: '0 16px', borderRadius: 12, border: '2px solid #E5E7EB', boxSizing: 'border-box', outline: 'none', backgroundColor: '#F9FAFB', transition: 'border-color 0.2s', color: '#111827' }} onFocus={(e) => e.target.style.borderColor = '#111827'} onBlur={(e) => e.target.style.borderColor = '#E5E7EB'} />

🌱 I WANT TO LEARN... setLearnInput(e.target.value)} placeholder="e.g. Video editing, Conversational Spanish" style={{ width: '100%', height: 56, fontSize: 16, fontWeight: 600, padding: '0 16px', borderRadius: 12, border: '2px solid #E5E7EB', boxSizing: 'border-box', outline: 'none', backgroundColor: '#F9FAFB', transition: 'border-color 0.2s', color: '#111827' }} onFocus={(e) => e.target.style.borderColor = '#111827'} onBlur={(e) => e.target.style.borderColor = '#E5E7EB'} />

{/* PARTICLE BURST (WOW MOMENT) */} {(sparks || []).map(spark => (

{spark.emoji}

))}

); }