Coquette Chronicles

UNSW Edition

{/* 📜 RIBBON FEED */}

{(delights ?? []).map((post) => (

{/* Post Header */}

post.author.handle && openProfile(post.author.handle)} style={{ width: 40, height: 40, borderRadius: '50%', backgroundColor: '#ffd1dc', backgroundImage: post.author.avatarUrl ? `url(${post.author.avatarUrl})` : 'none', backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, border: '2px solid white', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }} > {!post.author.avatarUrl && (post.author.name[0] || '?')}

{post.author.name}

{formatTime(post.timestamp)} • {post.type === 'food' ? '🍰 Food' : '✨ Life'}

{/* Post Content */}

{post.text}

{/* Lace Divider */}

{/* Reactions Bar */}

{Object.entries(post.reactions || {}).map(([emoji, userIds]) => ( userIds && (userIds || []).length > 0 && ( ) ))}

{/* Reaction Picker Popup */} {activeReactionId === post.id && (

{(reactionTypes || []).map(emoji => ( ))}

)}

))}

{/* Spacer for FAB */}

{/* ➕ FAB (Floating Action Button) */} {/* 📝 COMPOSER MODAL (Bottom Sheet) */} {isComposerOpen && (

setComposerOpen(false)}>

e.stopPropagation()} style={{ backgroundColor: '#fffbf0', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)', boxShadow: '0 -10px 40px rgba(0,0,0,0.15)', animation: 'slideUp 0.3s ease-out' }} >

Whisper your delight... 🦢

setNewPostText(e.target.value)}
              placeholder="What beauty did you encounter today?"
              style={{
                width: '100%',
                height: 100,
                border: '1px dashed #ffb7b2',
                borderRadius: 12,
                padding: 12,
                fontSize: 16,
                marginBottom: 16,
                backgroundColor: 'rgba(255, 255, 255, 0.5)',
                fontFamily: 'inherit',
                resize: 'none',
                outline: 'none'
              }}
              autoFocus
            />

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 10 }}>
                <button 
                  onClick={() => setNewPostType('life')}
                  style={{
                    padding: '8px 16px',
                    borderRadius: 20,
                    border: newPostType === 'life' ? '1px solid #d8819d' : '1px solid transparent',
                    backgroundColor: newPostType === 'life' ? '#fff0f5' : '#f5f5f5',
                    color: '#5d4037',
                    fontSize: 14
                  }}
                >
                  ✨ Life
                </button>
                <button 
                  onClick={() => setNewPostType('food')}
                  style={{
                    padding: '8px 16px',
                    borderRadius: 20,
                    border: newPostType === 'food' ? '1px solid #d8819d' : '1px solid transparent',
                    backgroundColor: newPostType === 'food' ? '#fff0f5' : '#f5f5f5',
                    color: '#5d4037',
                    fontSize: 14
                  }}
                >
                  🍰 Food
                </button>
              </div>

<button
                onClick={handlePost}
                style={{
                  padding: '12px 24px',
                  borderRadius: 24,
                  backgroundColor: '#d8819d',
                  color: 'white',
                  border: 'none',
                  fontWeight: 600,
                  fontSize: 16,
                  boxShadow: '0 4px 10px rgba(216, 129, 157, 0.4)'
                }}
              >
                Post 🕊️
              </button>
            </div>
          </div>
        </div>
      )}

{/* ⚪ PEARL SHOWER ANIMATION */}
      {(pearlShower || []).map((pearl) => (
        <div key={pearl.id} style={{
          position: 'fixed',
          top: -20,
          left: `${pearl.left}%`,
          width: 12,
          height: 12,
          borderRadius: '50%',
          background: 'radial-gradient(circle at 30% 30%, #ffffff, #f0f0f0)',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
          zIndex: 200,
          animation: `fall 2s linear forwards ${pearl.delay}s`,
          pointerEvents: 'none'
        }} />
      ))}

{/* CSS STYLES */}
      <style>{`
        @keyframes slideUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes popIn {
          from { transform: scale(0.5); opacity: 0; }
          to { transform: scale(1); opacity: 1; }
        }
        @keyframes fall {
          to { transform: translateY(120vh); }
        }
      `}</style>
    </div>
  );
}</article></body></html>