root
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Heart } from 'lucide-react';
|
|
import { useWishlist } from '@/presentation/providers/wishlist-provider';
|
|
import type { NewWishlistItem } from '@/domain/wishlist/entities';
|
|
|
|
interface WishlistButtonProps {
|
|
item: NewWishlistItem;
|
|
size?: 'sm' | 'md';
|
|
className?: string;
|
|
}
|
|
|
|
export default function WishlistButton({ item, size = 'md', className = '' }: WishlistButtonProps) {
|
|
const { toggleWishlist, isWishlisted } = useWishlist();
|
|
const saved = isWishlisted(item.id);
|
|
|
|
const sizeClasses = size === 'sm'
|
|
? 'h-8 w-8'
|
|
: 'h-10 w-10';
|
|
|
|
const iconSize = size === 'sm' ? 'h-4 w-4' : 'h-5 w-5';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
toggleWishlist(item);
|
|
}}
|
|
aria-label={saved ? 'Remove from wishlist' : 'Add to wishlist'}
|
|
aria-pressed={saved}
|
|
className={`group/wish flex items-center justify-center rounded-full border transition-all active:scale-95 ${sizeClasses} ${
|
|
saved
|
|
? 'border-[#c99a2e] bg-[#c99a2e]/15 text-[#c99a2e] shadow-sm'
|
|
: 'border-[#EDE6D9] bg-white/95 text-[#8A8478] hover:border-[#c99a2e]/50 hover:text-[#c99a2e]'
|
|
} ${className}`}
|
|
>
|
|
<Heart
|
|
className={`${iconSize} transition-transform group-hover/wish:scale-110 ${saved ? 'fill-[#c99a2e]' : ''}`}
|
|
/>
|
|
</button>
|
|
);
|
|
} |