59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { Heart } from 'lucide-react'
|
|
|
|
interface Props {
|
|
listingId: string
|
|
saveLabel: string
|
|
savedLabel: string
|
|
}
|
|
|
|
export default function SaveButton({ listingId, saveLabel, savedLabel }: Props) {
|
|
const [isSaved, setIsSaved] = useState(false)
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const stored = localStorage.getItem('savedListingIds')
|
|
if (stored) {
|
|
const ids = JSON.parse(stored) as string[]
|
|
setIsSaved(ids.includes(listingId))
|
|
}
|
|
} catch (e) {
|
|
console.error('Error reading localStorage:', e)
|
|
}
|
|
}, [listingId])
|
|
|
|
const toggleSave = () => {
|
|
try {
|
|
const stored = localStorage.getItem('savedListingIds')
|
|
let ids: string[] = stored ? JSON.parse(stored) : []
|
|
if (ids.includes(listingId)) {
|
|
ids = ids.filter(id => id !== listingId)
|
|
setIsSaved(false)
|
|
} else {
|
|
ids.push(listingId)
|
|
setIsSaved(true)
|
|
}
|
|
localStorage.setItem('savedListingIds', JSON.stringify(ids))
|
|
window.dispatchEvent(new Event('favorites-updated'))
|
|
} catch (err) {
|
|
console.error('Error writing localStorage:', err)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleSave}
|
|
className={`flex items-center justify-center gap-2 border font-bold text-xs py-3.5 px-4 rounded-xl transition ${
|
|
isSaved
|
|
? 'bg-bougainvillea/5 border-bougainvillea/20 text-bougainvillea'
|
|
: 'bg-paper border-pine/15 hover:bg-stone text-pine'
|
|
}`}
|
|
>
|
|
<Heart className={`w-4 h-4 ${isSaved ? 'fill-bougainvillea text-bougainvillea' : 'text-pine/70'}`} />
|
|
{isSaved ? savedLabel : saveLabel}
|
|
</button>
|
|
)
|
|
}
|