{children}

); const Button = ({ children, onClick, primary, style }) => { const [pressed, setPressed] = useState(false); return ( ); }; const Avatar = ({ url, name, size = 40, style }) => (

{url ? (

{ e.currentTarget.style.display = 'none'; }} /> ) : ( {(name || '?').charAt(0).toUpperCase()} )}

); // RENDER return (

{/* HEADER */}

The Club

{(events || []).length} Upcoming Events • {(memberList || []).length} Members

openProfile(user.handle)}>

{/* NAVIGATION TABS */}

{['events', 'members'].map(tab => (

setView(tab)} style={{ flex: 1, textAlign: 'center', padding: '12px 0', borderRadius: 16, fontSize: 15, fontWeight: 600, cursor: 'pointer', transition: 'all 0.3s ease', background: view === tab ? THEME.bg : 'transparent', boxShadow: view === tab ? THEME.shadowOut : 'none', color: view === tab ? THEME.accent : THEME.textLight }} > {tab.charAt(0).toUpperCase() + (tab || []).slice(1)}

))}

{/* CONTENT AREA */}

{/* EVENTS VIEW */} {view === 'events' && (

{(events || []).map(event => { const isGoing = (event.attendees ?? []).includes(user.id); const date = new Date(event.date); const dayName = date.toLocaleDateString('en-US', { weekday: 'short' }); const dayNum = date.getDate(); return (

{/* Date Badge */}

{dayName} {dayNum}

{/* Event Info */}

{event.title}

📍 {event.location}

{event.desc}

{/* Footer: Attendees + Action */}

{/* Attendee Stack */}

{(event.attendees ?? []).slice(0, 4).map((attId, i) => { const mem = getMember(attId); return (

); })} {(event.attendees?.length ?? 0) > 4 && (

+{(event.attendees || []).length - 4}

)}

); })}

)} {/* MEMBERS VIEW */} {view === 'members' && (

{(memberList || []).map(member => ( member.handle && openProfile(member.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: 24, gap: 12, cursor: member.handle ? 'pointer' : 'default' }} >

{member.displayName}

{member.role === 'owner' ? '👑 Club Admin' : 'Member'}

))} {/* Invite Prompt */}

➕

Invite Friend

)}

{/* FAB - Add Event */}

setIsAdding(!isAdding)} style={{ width: 56, height: 56, borderRadius: '50%', background: THEME.bg, boxShadow: isAdding ? THEME.shadowIn : THEME.shadowOut, color: THEME.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, cursor: 'pointer', transition: 'all 0.3s ease' }} > ➕

{/* ADD EVENT MODAL (Bottom Sheet) */}

New Event

setNewEvent({...newEvent, title: e.target.value})} style={{ width: '100%', height: 48, borderRadius: 12, border: 'none', background: THEME.bg, boxShadow: THEME.shadowIn, padding: '0 16px', fontSize: 16, outline: 'none', boxSizing: 'border-box', color: THEME.text }} /> setNewEvent({...newEvent, location: e.target.value})} style={{ width: '100%', height: 48, borderRadius: 12, border: 'none', background: THEME.bg, boxShadow: THEME.shadowIn, padding: '0 16px', fontSize: 16, outline: 'none', boxSizing: 'border-box', color: THEME.text }} /> setNewEvent({...newEvent, desc: e.target.value})} style={{ width: '100%', height: 48, borderRadius: 12, border: 'none', background: THEME.bg, boxShadow: THEME.shadowIn, padding: '0 16px', fontSize: 16, outline: 'none', boxSizing: 'border-box', color: THEME.text }} />

); }