lightswind/dist/src/components/ui/gradient-button.js

A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.

"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GradientButton = GradientButton;
const jsx_runtime_1 = require("react/jsx-runtime");
function GradientButton({ children, size = "md", className = "", gradientColors = [
    "#ff6d1b",
    "#ffee55",
    "#5bff89",
    "#4d8aff",
    "#6b5fff",
    "#ff64f9",
    "#ff6565",
], animationSpeed = 2, glowEffect = true, glowSize = 4, variant = "default", ...props }) {
    // Generate gradient string from colors
    const gradientString = gradientColors.join(", ");
    // Size classes mapping
    const sizeClasses = {
        sm: "text-sm px-4 py-2 rounded-full",
        md: "text-base px-6 py-2 rounded-full",
        lg: "text-lg px-8 py-3 rounded-full",
        xl: "text-2xl px-10 py-4 rounded-full",
    };
    // Border styles based on variant
    const borderStyles = {
        default: "border-transparent",
        outline: "border-current",
        ghost: "border-transparent bg-opacity-10",
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
                    __html: `
          .btn-gradient::before {
            content: "";
            background: linear-gradient(90deg, ${gradientString});
            height: 30%;
            width: 80%;
            position: absolute;
            bottom: -20%;
            z-index: 0;
            background-size: 200%;
            animation: gradient-animate ${animationSpeed}s infinite linear;
            filter: blur(calc(${glowSize} * 0.2rem));
          }

          .btn-gradient:hover,
          .btn-gradient:hover::before {
            animation: gradient-animate ${animationSpeed / 4}s infinite linear;
          }

          @keyframes gradient-animate {
            0% {
              background-position: 0;
            }
            100% {
              background-position: 200%;
            }
          }

          .btn-gradient {
            animation: gradient-animate ${animationSpeed}s infinite linear;
          }
        `,
                } }), (0, jsx_runtime_1.jsxs)("button", { className: `
          btn-gradient relative bg-black dark:bg-white text-white dark:text-black 
          hover:bg-primary dark:hover:bg-primary/90
          flex items-center
           justify-center 
          border-[0.15rem] Z-20 ${borderStyles[variant]} ${sizeClasses[size]} 
          ${className}
        `, style: {
                    background: variant === "ghost"
                        ? `linear-gradient(90deg, ${gradientString})`
                        : `
   
            `,
                    backgroundOrigin: "border-box",
                    backgroundClip: "padding-box, border-box, border-box",
                    backgroundSize: "200%",
                }, ...props, children: [glowEffect && ((0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-[-20%] h-[30%] w-[60%] z-[-1] blur-3xl", style: {
                            left: "50%",
                            transform: "translateX(-50%)",
                            background: `linear-gradient(90deg, ${gradientString})`,
                            backgroundSize: "200%",
                            animation: `gradient-animate ${animationSpeed}s infinite linear`,
                        } })), children] })] }));
}
exports.default = GradientButton;
//# sourceMappingURL=gradient-button.js.map