"use client";

import * as React from "react";

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

interface LikeButtonProps {
  initialCount?: number;
  defaultLiked?: boolean;
  className?: string;
  onToggle?: (liked: boolean) => void;
}

const HeartIcon = ({ className, filled }: { className?: string; filled?: boolean }) => (
  <svg
    viewBox="0 0 24 24"
    fill={filled ? "currentColor" : "none"}
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    <path d="M20.5 8.6c0 5-8.5 10.6-8.5 10.6S3.5 13.6 3.5 8.6c0-2.6 2-4.6 4.6-4.6 1.7 0 3.2.8 4 2.1.8-1.3 2.3-2.1 4-2.1 2.6 0 4.4 2 4.4 4.6z" />
  </svg>
);

export function LikeButton({
  initialCount = 128,
  defaultLiked = false,
  className,
  onToggle,
}: LikeButtonProps) {
  const [liked, setLiked] = React.useState(defaultLiked);
  const [count, setCount] = React.useState(initialCount);

  const handleToggle = () => {
    setLiked((prev) => {
      const next = !prev;
      setCount((current) => Math.max(0, current + (next ? 1 : -1)));
      onToggle?.(next);
      return next;
    });
  };

  return (
    <button
      type="button"
      onClick={handleToggle}
      className={cn(
        "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2",
        "text-sm font-medium text-foreground transition",
        "hover:bg-muted focus-visible:outline-none focus-visible:bg-muted",
        liked ? "bg-accent text-accent-foreground" : "bg-background",
        className
      )}
      aria-pressed={liked}
    >
      <HeartIcon className="h-4 w-4" filled={liked} />
      <span>{count}</span>
    </button>
  );
}
Like Button

Dependencies

Files

Installation
