"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface WishlistButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onToggle"> {
  active?: boolean;
  defaultActive?: boolean;
  count?: number;
  showCount?: boolean;
  onActiveChange?: (nextValue: boolean) => void;
}

export function WishlistButton({
  active,
  defaultActive = false,
  count,
  showCount = false,
  onActiveChange,
  className,
  ...props
}: WishlistButtonProps) {
  const isControlled = active !== undefined;
  const [internalActive, setInternalActive] = React.useState(defaultActive);
  const currentActive = isControlled ? active : internalActive;

  const toggleActive = () => {
    const nextValue = !currentActive;
    if (!isControlled) {
      setInternalActive(nextValue);
    }
    onActiveChange?.(nextValue);
  };

  const hasCount = showCount && typeof count === "number";

  return (
    <button
      type="button"
      data-state={currentActive ? "active" : "inactive"}
      className={cn(
        "group inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
        className
      )}
      onClick={(event) => {
        props.onClick?.(event);
        if (!event.defaultPrevented) {
          toggleActive();
        }
      }}
      aria-pressed={currentActive}
      {...props}
    >
      <span
        className={cn(
          "relative inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-muted transition",
          currentActive ? "text-primary" : "text-muted-foreground"
        )}
      >
        <span className="absolute inset-0 rounded-full bg-primary opacity-0 transition duration-300 group-data-[state=active]:scale-110 group-data-[state=active]:opacity-10" />
        <HeartIcon
          filled={currentActive}
          className="relative z-10 h-4 w-4 transition-transform duration-200 group-data-[state=active]:scale-110"
        />
      </span>
      {hasCount ? (
        <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground">
          {count}
        </span>
      ) : null}
    </button>
  );
}

function HeartIcon({
  filled,
  className,
}: {
  filled: boolean;
  className?: string;
}) {
  return (
    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
      className={className}
    >
      <path
        d="M12 20.4c-4.1-2.4-7.2-5.6-8.8-9-1.4-3 0-6.6 3.6-6.6 2 0 3.7 1 5.2 2.8 1.5-1.8 3.2-2.8 5.2-2.8 3.6 0 5 3.6 3.6 6.6-1.6 3.4-4.7 6.6-8.8 9Z"
        fill={filled ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth={1.4}
      />
    </svg>
  );
}
Wishlist Button

Dependencies

Files

Installation
