fix: consolidate hearts to single like button with count

- Remove duplicate LikeButton component from room info section
- Remove separate like count badge from bottom-right
- Single unified like button (top-left) shows heart + count
- Cleaner UI: one heart, one tap, clear feedback
This commit is contained in:
2026-06-30 23:41:37 -05:00
parent 4fb97e1f10
commit a8df420f36
+13 -31
View File
@@ -3,7 +3,6 @@
import { useEffect, useState, useRef } from 'react';
import { formatDisplayDate } from '@/lib/date';
import RoomCalendar from '@/components/RoomCalendar';
import LikeButton from '@/components/LikeButton';
import OptimizedImage from '@/components/OptimizedImage';
interface Room {
@@ -331,47 +330,33 @@ export default function RoomsPage() {
</div>
)}
{/* Like button overlay */}
{/* Like button with count */}
<button
onClick={() => toggleLike(room.id)}
style={{
position: 'absolute',
top: 12,
left: 12,
width: 40,
height: 40,
borderRadius: '50%',
border: 'none',
background: hasLiked ? 'rgba(231,76,60,0.9)' : 'rgba(0,0,0,0.4)',
color: '#fff',
fontSize: '20px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '6px',
padding: '6px 12px',
borderRadius: '999px',
border: 'none',
background: hasLiked ? 'rgba(231,76,60,0.9)' : 'rgba(0,0,0,0.5)',
color: '#fff',
fontSize: '14px',
fontWeight: 600,
cursor: 'pointer',
transition: 'all 0.2s ease',
}}
onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.15)'; }}
onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.05)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
aria-label="Like this room"
>
{hasLiked ? '\u2764\uFE0F' : '\u2661'}
<span style={{ fontSize: '16px' }}>{hasLiked ? '❤️' : '♡'}</span>
<span>{totalLikes}</span>
</button>
{/* Like count */}
<div style={{
position: 'absolute',
bottom: 8,
right: 12,
background: hasLiked ? 'rgba(231,76,60,0.85)' : 'rgba(0,0,0,0.5)',
color: '#fff',
fontSize: '13px',
fontWeight: 600,
padding: '4px 10px',
borderRadius: '999px',
}}>
{'\u2764\uFE0F'} {totalLikes}
</div>
</div>
{/* ─── Thumbnail Strip ─── */}
@@ -425,10 +410,7 @@ export default function RoomsPage() {
{/* ─── Room Info ─── */}
<div style={{ padding: '1.5rem', flex: 1, display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<h2 style={{ margin: 0, color: navy, fontSize: '24px' }}>{room.name}</h2>
<LikeButton roomId={room.id} />
</div>
<p style={{ color: '#555', lineHeight: 1.5, flex: 1, marginTop: '0.5rem' }}>{room.description}</p>
{/* ─── Amenity Icons ─── */}