35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { Heart } from 'lucide-react'
|
|
import type { Product } from '@homaroma/types'
|
|
|
|
import { useWishlistStore } from '../store/wishlistStore'
|
|
|
|
type WishlistButtonProps = {
|
|
product: Product
|
|
}
|
|
|
|
export default function WishlistButton({ product }: WishlistButtonProps) {
|
|
const isInWishlist = useWishlistStore((state) => state.isInWishlist(product.id))
|
|
const toggleItem = useWishlistStore((state) => state.toggleItem)
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
toggleItem(product)
|
|
}}
|
|
aria-label={isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
|
|
className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-surface-card/90 shadow-sm backdrop-blur transition hover:scale-105 ${
|
|
isInWishlist
|
|
? 'border-rose-200 text-rose-500'
|
|
: 'border-line-primary/20 text-text-main hover:border-rose-200 hover:text-rose-500'
|
|
}`}
|
|
>
|
|
<Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} />
|
|
</button>
|
|
)
|
|
}
|