{/* DYNAMIC STYLES FOR ANIMATIONS */} {/* HEADER */}

CampusConnect ✨

{(events || []).filter(e => !e.isDemo).length} Events happening soon

{/* MEMBERS / RECENT ACTIVITY BAR */} {(memberList || []).length > 0 && (

{isMultiplayer ? `${memberList.length} Member${memberList.length !== 1 ? 's' : ''}` : 'Your Community'}

{(memberList || []).map((m, idx) => { const name = m.displayName || m.name || 'User'; const avatar = m.avatarUrl || m.profileImageUrl; const handle = m.handle; const rsvpCount = (rsvps || []).filter(r => r.userId === m.id).length; return (

handle && openProfile && openProfile(handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, minWidth: 60, cursor: handle ? 'pointer' : 'default' }} >

{!avatar && getInitials(name)}

{m.id === user?.id ? 'You' : name.split(' ')[0]} {rsvpCount > 0 && ( {rsvpCount} 🎟️ )}

); })}

)} {/* EVENT LIST */}

{(events || []).length === 0 ? (

📭

No events yet.

Be the first to create one!

) : ( (events || []).map((event) => { const eventRSVPs = (rsvps || []).filter(r => r.eventId === event.id); const isMyRSVP = (eventRSVPs || []).some(r => r.userId === user?.id); const isAnimatingPop = justAddedId === event.id; const isShowingConfetti = confettiEventId === event.id; return (

{event.isDemo && (

Demo

)}

{event.society && (

{event.society}

)}

{event.title}

📅 {formatDate(event.date)} at {event.time}

📍 {event.location}

{/* ATTENDEE CAROUSEL */}

{(eventRSVPs || []).length === 0 ? ( Be the first! ) : (

{(eventRSVPs || []).slice(0, 5).map((rsvp, idx) => (

rsvp._user?.handle && openProfile && openProfile(rsvp._user.handle)} style={{ width: 32, height: 32, borderRadius: 16, background: rsvp._user?.profileImageUrl ? `url(${rsvp._user.profileImageUrl}) center/cover` : event.color, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF', fontSize: 12, fontWeight: 700, marginLeft: idx > 0 ? -10 : 0, border: '2px solid #FFF', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', zIndex: 10 - idx, cursor: rsvp._user?.handle ? 'pointer' : 'default' }} > {!rsvp._user?.profileImageUrl && getInitials(rsvp._user?.displayName)}

))} {(eventRSVPs || []).length > 5 && (

+{(eventRSVPs || []).length - 5}

)}

{/* RSVP BUTTON */}

{isShowingConfetti && (

{['🎉', '✨', '🎈', '🔥'].map((emoji, i) => ( {emoji} ))}

)}

); }) )}

{/* STICKY BOTTOM CREATE BUTTON */}

{/* CREATE EVENT BOTTOM SHEET OVERLAY */}

setIsCreating(false)} /> {/* BOTTOM SHEET CONTENT */}

New Event ✨

setNewEvent({...newEvent, title: e.target.value})} style={{ width: '100%', height: 52, padding: '0 16px', boxSizing: 'border-box', borderRadius: 16, border: '1px solid #E0E0E0', fontSize: 16, backgroundColor: '#F8F9FA' }} />

setNewEvent({...newEvent, date: e.target.value})} style={{ flex: 1, height: 52, padding: '0 16px', boxSizing: 'border-box', borderRadius: 16, border: '1px solid #E0E0E0', fontSize: 16, backgroundColor: '#F8F9FA' }} /> setNewEvent({...newEvent, time: e.target.value})} style={{ flex: 1, height: 52, padding: '0 16px', boxSizing: 'border-box', borderRadius: 16, border: '1px solid #E0E0E0', fontSize: 16, backgroundColor: '#F8F9FA' }} />

setNewEvent({...newEvent, location: e.target.value})} style={{ width: '100%', height: 52, padding: '0 16px', boxSizing: 'border-box', borderRadius: 16, border: '1px solid #E0E0E0', fontSize: 16, backgroundColor: '#F8F9FA' }} /> setNewEvent({...newEvent, society: e.target.value})} style={{ width: '100%', height: 52, padding: '0 16px', boxSizing: 'border-box', borderRadius: 16, border: '1px solid #E0E0E0', fontSize: 16, backgroundColor: '#F8F9FA' }} />

); }