Favorito con pulso

"use client";

import { useState, type CSSProperties } from "react";

/** Favorito con pulso. React + TypeScript, sin dependencias. Personaliza con variables --gczf-*. */
export type FavoritoAnimadoProps = {
  initial?: boolean;
  label?: string;
  onChange?: (value: boolean) => void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gczf-root { box-sizing: border-box; min-width: 0; max-width: 100%; color: var(--gczf-fg, #202421); font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gczf-root *, .gczf-root *::before, .gczf-root *::after { box-sizing: border-box; }
.gczf-root button, .gczf-root input, .gczf-root textarea, .gczf-root select { font: inherit; }
.gczf-root button, .gczf-root a { -webkit-tap-highlight-color: transparent; }
.gczf-root :focus-visible { outline: 2px solid var(--gczf-accent, #25724b); outline-offset: 4px; }
.gczf-root ::selection { background: var(--gczf-accent, #25724b); color: #fff; }
.gczf-root button:disabled { opacity: .5; cursor: not-allowed; }
.gczf-root svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .gczf-root *, .gczf-root *::before, .gczf-root *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.gczf-root { display:flex; flex-direction:column; align-items:center; gap:18px; }
.gczf-root button { position:relative; display:grid; place-items:center; width:72px; height:72px; border:1px solid #d9c6c2; background:var(--gczf-bg,#fff5f3); color:#a05753; border-radius:50%; cursor:pointer; }
.gczf-root svg { fill:transparent; transition:fill .2s,color .2s; }
.gczf-root button[aria-pressed="true"] { color:var(--gczf-accent,#ac443d); }
.gczf-root button[aria-pressed="true"] svg { fill:currentColor; animation:gczf-pop .35s cubic-bezier(.16,1,.3,1); }
.gczf-orbit { position:absolute; inset:0; border:1px solid currentColor; border-radius:50%; opacity:0; pointer-events:none; }
.gczf-root button[aria-pressed="true"] .gczf-orbit { animation:gczf-ring .6s cubic-bezier(.16,1,.3,1); }
.gczf-root>span { font-size:12px; color:#805a54; }
@keyframes gczf-pop { from { transform:scale(.6); } to { transform:scale(1); } }
@keyframes gczf-ring { from { opacity:.5; transform:scale(1); } to { opacity:0; transform:scale(1.45); } }`;

export function FavoritoAnimado({
  initial = false,
  label = "Guardar en favoritos",
  onChange,
  className = "",
  style,
}: FavoritoAnimadoProps) {
  const [liked, setLiked] = useState(initial);
  return (
    <div className={`gczf-root ${className}`} style={style}>
      <style>{CSS}</style>
      <button
        type="button"
        aria-pressed={liked}
        aria-label={label}
        onClick={() => {
          setLiked(!liked);
          onChange?.(!liked);
        }}
      >
        <span className="gczf-orbit" aria-hidden="true" />
        <svg
          width="26"
          height="26"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth="1.5"
          aria-hidden="true"
        >
          <path d="M12 20 4 12C-2 6 7 0 12 6 17 0 26 6 20 12Z" />
        </svg>
      </button>
      <span role="status">
        {liked ? "Guardado en favoritos" : "Guarda lo que te inspira"}
      </span>
    </div>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/favorito-animado

import { FavoritoAnimado } from "./favorito-animado";

export default function Ejemplo() {
  return <FavoritoAnimado label="Ejemplo" initial />;
}