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:
+13
-31
@@ -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 ─── */}
|
||||
|
||||
Reference in New Issue
Block a user