Pulsating Button

/* Source: Magic UI — https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/pulsating-button.tsx — MIT. Included under its original licence. */
/* Copyright (c) Magic UI */

import * as React from "react";

const cx = (...classes: Array<string | false | undefined>) =>
  classes.filter(Boolean).join(" ");

export interface PulsatingButtonProps
  extends React.ComponentPropsWithoutRef<"button"> {
  pulseColor?: string;
  duration?: string;
  distance?: string;
}

export const PulsatingButton = React.forwardRef<
  HTMLButtonElement,
  PulsatingButtonProps
>(
  (
    {
      className,
      children,
      pulseColor = "rgba(99, 102, 241, 0.7)",
      duration = "1.5s",
      distance = "8px",
      ...props
    },
    ref,
  ) => {
    return (
      <>
        <button
          ref={ref}
          className={cx(
            "relative flex cursor-pointer items-center justify-center rounded-lg bg-indigo-600 px-5 py-2.5 text-center text-sm font-semibold text-white transition-colors hover:bg-indigo-500",
            className,
          )}
          style={
            {
              "--pulse-color": pulseColor,
              "--duration": duration,
              "--distance": distance,
            } as React.CSSProperties
          }
          {...props}
        >
          <span className="relative z-10">{children}</span>
          <span
            aria-hidden="true"
            className="si-pulse pointer-events-none absolute inset-0 rounded-[inherit]"
          />
        </button>
        <style>{`
          .si-pulse { animation: si-pulse var(--duration) ease-out infinite; }
          @keyframes si-pulse {
            0%, 100% { box-shadow: 0 0 0 0 var(--pulse-color); }
            50% { box-shadow: 0 0 0 var(--distance) var(--pulse-color); }
          }
        `}</style>
      </>
    );
  },
);
PulsatingButton.displayName = "PulsatingButton";

export default function SrcPulsatingGlowButton() {
  return (
    <section className="flex min-h-[240px] items-center justify-center bg-white px-6 py-20 dark:bg-zinc-950">
      <PulsatingButton>Notify Me</PulsatingButton>
    </section>
  );
}