Mane Frame

Your hair journey moodboard

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

m.handle ? openProfile(m.handle) : null} style={{ width: 32, height: 32, borderRadius: '50%', border: '2px solid #FAF7F2', marginLeft: -8, backgroundColor: '#E5A9A9', backgroundImage: m.avatarUrl ? `url(${m.avatarUrl})` : 'none', backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, cursor: 'pointer', zIndex: i }} > {!m.avatarUrl && }

))}

{/* Tags Rail */} {(allTags || []).length > 0 && (

{(allTags || []).map(tag => ( ))}

)} {/* Grid */}

{(filteredPosts || []).map((post, idx) => (

post._user?.handle && openProfile(post._user.handle)} style={{ width: 28, height: 28, borderRadius: '50%', backgroundColor: '#EEE', backgroundImage: `url(${post._user?.profileImageUrl})`, backgroundSize: 'cover', cursor: post._user?.handle ? 'pointer' : 'default' }} />

{post._user?.displayName || 'Unknown'}

{post.isDemo && ( Demo )}

{/* Floating tags on image */}

{(post.tags || []).map(tag => ( {tag} ))}

{post.caption}

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

{emoji} {count}

))}

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

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

)}

))} {(filteredPosts || []).length === 0 && (

🔍

No inspo found for this vibe.

)}

{/* FAB */} {/* Add Post Modal */}

{draftPost.localUrl && (

)}

setDraftPost(prev => ({ ...prev, caption: e.target.value }))}
                placeholder="What's the vibe? ✨"
                style={{ 
                  width: '100%', height: 70, border: 'none', background: 'transparent',
                  fontSize: 16, fontFamily: 'inherit', resize: 'none', outline: 'none',
                  color: '#2C2A29'
                }}
              />
              
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {(draftPost.tags || []).map(tag => (
                  <span key={tag} style={{
                    backgroundColor: '#E5A9A9', color: '#FFF', padding: '4px 10px', 
                    borderRadius: 12, fontSize: 12, fontWeight: 600
                  }}>
                    {tag}
                  </span>
                ))}
              </div>
              
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <span style={{ fontSize: 18 }}>🏷️</span>
                <input 
                  value={newTagInput}
                  onChange={e => setNewTagInput(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && handleAddTag()}
                  placeholder="Add tag (e.g. #Blonde)"
                  style={{ 
                    flex: 1, border: 'none', borderBottom: '1px solid #D5CFC6',
                    background: 'transparent', padding: '6px 0', fontSize: 14,
                    outline: 'none'
                  }}
                />
                <button 
                  onClick={handleAddTag}
                  style={{ background: '#2C2A29', color: '#FFF', border: 'none', borderRadius: 12, padding: '6px 12px', fontSize: 12, fontWeight: 600 }}
                >
                  Add
                </button>
              </div>
            </div>
          </div>

<div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
            <button 
              onClick={() => setIsModalOpen(false)}
              style={{ flex: 1, padding: 16, borderRadius: 16, border: '1px solid #D5CFC6', background: 'transparent', fontSize: 16, fontWeight: 600, color: '#6C655E' }}
            >
              Cancel
            </button>
            <button 
              onClick={submitPost}
              disabled={!draftPost.assetId}
              style={{ flex: 2, padding: 16, borderRadius: 16, border: 'none', background: draftPost.assetId ? '#2C2A29' : '#D5CFC6', color: '#FFF', fontSize: 16, fontWeight: 600 }}
            >
              Post to Frame ✨
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}</article></body></html>