Pulse Heart
A like button that contracts, flips, and rebounds while its count ticks over.
Implementation
1"use client";2 3import { useEffect, useState, type ButtonHTMLAttributes } from "react";4import { Heart } from "lucide-react";5 6export type PulseHeartProps = Omit<7 ButtonHTMLAttributes<HTMLButtonElement>,8 "children" | "onChange"9> & {10 /** Controlled liked state. */11 liked?: boolean;12 /** Initial liked state when uncontrolled. */13 defaultLiked?: boolean;14 /** Controlled count. */15 count?: number;16 /** Initial count when uncontrolled. */17 defaultCount?: number;18 /** Called on every press with the new state and count. */19 onLikeChange?: (liked: boolean, count: number) => void;20 /** Accessible name; the count is appended. */21 label?: string;22 /** Show the count beside the glyph. */23 showCount?: boolean;24 disabled?: boolean;25 className?: string;26};27 28const normalizeCount = (value: number) =>