forgeplus-react/src/components/button/index.jsx

import React, { useEffect, useRef } from 'react';
import './index.scss';

export const FlowBorderButton = ({
  className = '',
  children,
  href ,
  onClick,
  ...restProps
}) => {
  return <a className={`flowBorderButton ${className}`} href={href} onClick={onClick}>
    <div class="flowBorder"></div>
    {children}
    </a>
}

const GlowButton = ({
  className = '',
  children,
  href,
  onClick,
  ...restProps
}) => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (!button) return;

    const handleMouseMove = (e) => {
      const rect = button.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      button.style.setProperty('--mouse-x', `${x}px`);
      button.style.setProperty('--mouse-y', `${y}px`);
    };

    button.addEventListener('mousemove', handleMouseMove);

    return () => {
      button.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <a
      ref={buttonRef}
      className={`glow-button ${className}`}
      href={href}
      onClick={onClick}
      {...restProps}
    >
      {children}
    </a>
  );
};

export default GlowButton;