{[1, 2, 3, 4, 5].map(i => (

interactive && setRating(i)} style={{ fontSize: 20, cursor: interactive ? 'pointer' : 'default', opacity: i <= rating ? 1 : 0.3, transform: i <= rating ? 'scale(1.1)' : 'scale(1)', transition: 'all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)', textShadow: i <= rating ? '0 2px 4px rgba(0,0,0,0.1)' : 'none' }}> {i <= rating ? '⚪' : '◌'}

))}

); // 🎀 COMPONENTS 🎀 return (

{/* HEADER */}

🎀

The Velvet Brew

{isMultiplayer ? "Our Shared Memories" : "My Treasured Sips & Sweets"}

{/* CONTENT AREA */}

{view === 'list' && ( <> {/* MEMBER AVATARS (MULTIPLAYER) */}

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

0 ? -10 : 0, boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }}> {m.avatarUrl ?

🦢

}

))}

{state?.entries?.map((entry, i) => (

{ setActiveEntry(entry); setView('detail'); }} style={{ background: colors.card, borderRadius: 16, padding: 20, position: 'relative', border: '1px solid #FFE4E1', boxShadow: '0 8px 20px rgba(141, 110, 99, 0.08)', transform: 'rotate(' + (i % 2 === 0 ? '-1deg' : '1deg') + ')', transition: 'transform 0.2s', cursor: 'pointer' }}>

🎀

{entry.type} {entry.date}

{entry.name}

📍 {entry.location}

{(entry.notes || []).length > 60 ? entry.notes.substring(0, 60) + '...' : entry.notes}

))} )} {view === 'detail' && activeEntry && (

{activeEntry.type === 'coffee' ? '☕' : '🍰'}

{activeEntry.name}

@{activeEntry.location}

{activeEntry.notes}

{(activeEntry.stickers || []).map((s,i) => {s})}

Tasted by {activeEntry.author}

)} {view === 'add' && (

New Memory 🦢

setNewEntry({...newEntry, name: e.target.value})} style={{ width: '100%', padding: 15, borderRadius: 12, border: '1px solid #eee', background: '#FFFAF0', fontSize: 16, fontFamily: 'inherit' }} /> setNewEntry({...newEntry, location: e.target.value})} style={{ width: '100%', padding: 15, borderRadius: 12, border: '1px solid #eee', background: '#FFFAF0', fontSize: 16, fontFamily: 'inherit' }} />

{['coffee', 'sweet'].map(t => ( ))}

Pearl Rating

setNewEntry({...newEntry, rating: r})} interactive={true} />

setNewEntry({...newEntry, notes: e.target.value})} 
              style={{ width: '100%', padding: 15, borderRadius: 12, border: '1px solid #eee', background: '#FFFAF0', fontSize: 16, fontFamily: 'inherit', height: 100, resize: 'none' }} />

<div style={{ display: 'flex', gap: 10, marginTop: 'auto' }}>
              <button onClick={() => setView('list')} style={{ flex: 1, padding: 15, borderRadius: 12, border: 'none', background: '#eee' }}>Cancel</button>
              <button onClick={handleSaveEntry} style={{ flex: 1, padding: 15, borderRadius: 12, border: 'none', background: colors.ribbon, color: 'white', fontWeight: 'bold' }}>Seal it 💋</button>
            </div>
          </div>
        )}

</div>

{/* FAB */}
      {view === 'list' && (
        <button onClick={() => setView('add')} style={{ 
          position: 'absolute', bottom: 30, 
          width: 70, height: 70, borderRadius: '50%', 
          background: `linear-gradient(135deg, ${colors.accent}, ${colors.utOrange})`,
          border: '4px solid white', boxShadow: '0 5px 15px rgba(255, 183, 197, 0.6)',
          fontSize: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', zIndex: 100, transition: 'transform 0.2s'
        }} onMouseDown={e => e.currentTarget.style.transform = 'scale(0.9)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}>
          ✒️
        </button>
      )}

</div>
  );
}</article></body></html>