📄 wishlist-button.blade.php

<button
    wire:click="toggle"
    wire:loading.class="opacity-50 pointer-events-none"
    title="{{ $wishlisted ? 'Remove from Wishlist' : 'Add to Wishlist' }}"
    class="group flex items-center justify-center w-10 h-10 rounded-full transition-all
        {{ $wishlisted
            ? 'bg-red-50 text-red-500 hover:bg-red-100'
            : 'bg-gray-100 text-gray-400 hover:bg-red-50 hover:text-red-400'
        }}"
>
    <svg class="w-5 h-5 transition-transform group-hover:scale-110"
         fill="{{ $wishlisted ? 'currentColor' : 'none' }}"
         stroke="currentColor"
         stroke-width="2"
         viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
    </svg>
</button>