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 { useEffect, useState, useRef } from 'react';
|
||||||
import { formatDisplayDate } from '@/lib/date';
|
import { formatDisplayDate } from '@/lib/date';
|
||||||
import RoomCalendar from '@/components/RoomCalendar';
|
import RoomCalendar from '@/components/RoomCalendar';
|
||||||
import LikeButton from '@/components/LikeButton';
|
|
||||||
import OptimizedImage from '@/components/OptimizedImage';
|
import OptimizedImage from '@/components/OptimizedImage';
|
||||||
|
|
||||||
interface Room {
|
interface Room {
|
||||||
@@ -331,47 +330,33 @@ export default function RoomsPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Like button overlay */}
|
{/* Like button with count */}
|
||||||
<button
|
<button
|
||||||
onClick={() => toggleLike(room.id)}
|
onClick={() => toggleLike(room.id)}
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 12,
|
top: 12,
|
||||||
left: 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',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
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',
|
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)'; }}
|
onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
|
||||||
aria-label="Like this room"
|
aria-label="Like this room"
|
||||||
>
|
>
|
||||||
{hasLiked ? '\u2764\uFE0F' : '\u2661'}
|
<span style={{ fontSize: '16px' }}>{hasLiked ? '❤️' : '♡'}</span>
|
||||||
|
<span>{totalLikes}</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* ─── Thumbnail Strip ─── */}
|
{/* ─── Thumbnail Strip ─── */}
|
||||||
@@ -425,10 +410,7 @@ export default function RoomsPage() {
|
|||||||
|
|
||||||
{/* ─── Room Info ─── */}
|
{/* ─── Room Info ─── */}
|
||||||
<div style={{ padding: '1.5rem', flex: 1, display: 'flex', flexDirection: 'column' }}>
|
<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>
|
<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>
|
<p style={{ color: '#555', lineHeight: 1.5, flex: 1, marginTop: '0.5rem' }}>{room.description}</p>
|
||||||
|
|
||||||
{/* ─── Amenity Icons ─── */}
|
{/* ─── Amenity Icons ─── */}
|
||||||
|
|||||||
Reference in New Issue
Block a user