coderhood-ui/src/components/buttons/GlitchButton.jsx

UI Library

import React, { useEffect, useRef } from "react";
import "./GlitchButton.css";

function GlitchButton({
    children = "Cyberpunk Glitch",
    onClick = () => { },
    className = "",
    style = {},
    font = "Orbitron",
    color = "#ffd700",
    glitchColor1 = "#ff0000",
    glitchColor2 = "#00ffff",
    glitchTime = 250,
    ...props
}) {
    const buttonRef = useRef(null);

    useEffect(() => {
        if (buttonRef.current) {
            buttonRef.current.style.setProperty("--glitch-content", `"${children}"`);
            buttonRef.current.style.setProperty("--glitch1-color", glitchColor1);
            buttonRef.current.style.setProperty("--glitch2-color", glitchColor2);
            buttonRef.current.style.setProperty("--color", color);
            buttonRef.current.classList.remove("glitch");
        }
    }, [children]);

    const glitch = (button) => {
        button.classList.add("glitch");
        setTimeout(() => button.classList.remove("glitch"), glitchTime);
    };

    return (
        <button
            ref={buttonRef}
            className={`glitch-btn ${className}`}
            style={{
                fontFamily: font,
                color: color,
                borderColor: color,
                ...style,
            }}
            onClick={(e) => {
                glitch(e.currentTarget);
                setTimeout(() => { onClick() }, glitchTime);
            }}
        >
            {children}
        </button>
    );
}

export default GlitchButton;