WORLD CLOCK ☀️

{isMultiplayer && (memberList || []).length > 1 && (

{(memberList || []).slice(0, 4).map((m, i) => (

m.handle && openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: '2px solid #fff', marginLeft: i > 0 ? -10 : 0, background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : 'linear-gradient(135deg, #FF6B35, #FF69B4)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#fff', fontWeight: 700, cursor: 'pointer', zIndex: (memberList || []).length - i, position: 'relative', }} > {!m.avatarUrl && (m.displayName?.[0] || '?')}

))} {(memberList || []).length > 4 && (

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

)}

{offsetMinutes !== 0 && (

⏰ Time shifted {formatOffset(offsetMinutes)} from now {lastUpdatedBy && lastUpdatedBy.id !== user?.id && ( by {lastUpdatedBy.displayName} )}

)}

{(cities || []).map((city) => { const info = getAdjustedTime(city.timezone); const dayNight = getDayNightGradient(info.hour24); const textCol = getTextColor(info.hour24); const subCol = getSubTextColor(info.hour24); const timeParts = info.time.split(' '); const timeStr = timeParts[0] || info.time; const ampm = timeParts[1] || ''; return (

= 20 || info.hour24 < 6 ? '0 4px 20px rgba(0,0,0,0.2)' : '0 4px 20px rgba(255,107,53,0.15)', transition: 'all 0.3s ease', transform: isDragging ? 'scale(0.995)' : 'scale(1)', }} >

{dayNight.icon}

{city.emoji} {city.name}

{timeStr} {ampm}

{info.date} {dayNight.label}

); })}

🕰️ Summer Shift Slider

-12h -6h NOW +6h +12h

{offsetMinutes === 0 ? '🌞' : (offsetMinutes > 0 ? '⏩' : '⏪')}

{formatOffset(offsetMinutes)}

); }