Full website

apps/website/src/components/WishlistButton.tsx

@@ -0,0 +1,34 @@
+"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-white/90 shadow-sm backdrop-blur transition hover:scale-105 ${
+        isInWishlist
+          ? 'border-rose-200 text-rose-500'
+          : 'border-gray-200 text-pop-black hover:border-rose-200 hover:text-rose-500'
+      }`}
+    >
+      <Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} />
+    </button>
+  )
+}