NeonEdge

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type NeonEdgeProps = {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  /** Head and tail colours of the light running round the edge. */
  colors?: [string, string];
  /** Fill inside the edge. */
  background?: string;
  /** Edge thickness in pixels. */
  edge?: number;
  /** Seconds for one lap. */
  speed?: number;
};

/* NeonEdge: a streak of neon light keeps running round the button edge. */
export function NeonEdge({
  children,
  className = "rounded-full px-9 py-4 text-[15px] font-medium text-[#ede9fe]",
  onClick,
  colors = ["#a78bfa", "#34f5c5"],
  background = "#0d0c14",
  edge = 1.5,
  speed = 3,
}: NeonEdgeProps) {
  const reduce = useReducedMotion();
  const [a, b] = colors;
  // Reduced motion: a still edge in both colours instead of a moving streak.
  const light = reduce
    ? `conic-gradient(${a}, ${b}, ${a})`
    : `conic-gradient(from 0deg, transparent 0 65%, ${a} 85%, ${b} 100%)`;

  return (
    <button type="button" onClick={onClick} className={`relative isolate overflow-hidden ${className}`}>
      <motion.span
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-1/2 -z-10 aspect-square w-[300%] -translate-x-1/2 -translate-y-1/2"
        style={{ background: light }}
        animate={reduce ? undefined : { rotate: 360 }}
        transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
      />
      <span aria-hidden className="pointer-events-none absolute -z-10 rounded-[inherit]" style={{ inset: edge, background }} />
      <span className="relative">{children}</span>
    </button>
  );
}