1import React from "react";
2
3export type GradientButtonProps = {
4  variant?: "pulse" | "glow" | "sweep" | "shine" | "outline";
5  size?: "xs" | "sm" | "md" | "lg" | "xl";
6  theme?: "sunset" | "ocean" | "forest" | "neon" | "berry" | "nuvyx" | "custom";
7  customGradient?: string;
8  rounded?: "full" | "md" | "lg" | "none";
9  shadow?: boolean;
10  hoverEffect?: "scale" | "brightness" | "contrast" | "none";
11  className?: string;
12  children: React.ReactNode;
13};
14
15export const GradientButton = ({
16  variant = "glow",
17  size = "md",
18  theme = "nuvyx",
19  customGradient,
20  rounded = "md",
21  shadow = true,
22  hoverEffect = "brightness",
23  className = "",
24  children,
25}: GradientButtonProps) => {
26  const sizeClasses = {
27    xs: "h-6 px-3 text-xs",
28    sm: "h-8 px-4 text-sm",
29    md: "h-10 px-5 text-base",
30    lg: "h-12 px-6 text-lg",
31    xl: "h-14 px-8 text-xl",
32  };
33
34  const roundedClasses = {
35    none: "rounded-none",
36    md: "rounded-md",
37    lg: "rounded-lg",
38    full: "rounded-full",
39  };
40
41  const hoverClasses = {
42    scale: "hover:scale-105 transition-transform duration-300",
43    brightness: "hover:brightness-110 transition-all duration-300",
44    contrast: "hover:contrast-125 transition-all duration-300",
45    none: "",
46  };
47
48  const shadowClass = shadow ? "shadow-lg" : "";
49
50  const themeGradients = {
51    sunset: "bg-gradient-to-r from-amber-500 via-orange-600 to-pink-500",
52    ocean: "bg-gradient-to-r from-cyan-400 via-blue-500 to-indigo-600",
53    forest: "bg-gradient-to-r from-emerald-400 via-green-500 to-teal-600",
54    neon: "bg-gradient-to-r from-green-400 via-purple-500 to-pink-500",
55    berry: "bg-gradient-to-r from-fuchsia-500 via-purple-600 to-indigo-500",
56    nuvyx: "bg-gradient-to-r from-purple-800 via-blue-800 to-pink-800",
57    custom: customGradient || "bg-gradient-to-r from-violet-500 to-fuchsia-500",
58  };
59
60  const baseClasses = `inline-flex items-center justify-center font-medium text-white transition-all ${sizeClasses[size]} ${roundedClasses[rounded]} ${shadowClass} ${hoverClasses[hoverEffect]}`;
61
62  if (variant === "pulse") {
63    return (
64      <button
65        className={`${baseClasses} ${themeGradients[theme]} relative overflow-hidden group ${className}`}
66      >
67        <span className="relative z-10">{children}</span>
68        <span className="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300 ease-in-out"></span>
69        <span className="absolute inset-0 animate-pulse bg-white opacity-0 group-hover:opacity-10"></span>
70      </button>
71    );
72  }
73
74  if (variant === "glow") {
75    return (
76      <button
77        className={`${baseClasses} ${themeGradients[theme]} relative group ${className}`}
78      >
79        <span className="relative z-10">{children}</span>
80        <span className="absolute -inset-1 rounded-lg blur opacity-0 group-hover:opacity-20 transition duration-1000 group-hover:duration-200"></span>
81      </button>
82    );
83  }
84
85  if (variant === "sweep") {
86    return (
87      <button
88        className={`${baseClasses} ${themeGradients[theme]} relative overflow-hidden group ${className}`}
89      >
90        <span className="relative z-10">{children}</span>
91        <span className="absolute top-0 -right-full h-full w-1/2 z-0 block transform -skew-x-12 bg-white opacity-20 group-hover:right-0 transition-all duration-700"></span>
92      </button>
93    );
94  }
95
96  if (variant === "shine") {
97    return (
98      <button
99        className={`${baseClasses} ${themeGradients[theme]} relative overflow-hidden group ${className}`}
100      >
101        <span className="relative z-10">{children}</span>
102        <span className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 group-hover:translate-x-full transition-all duration-1000 ease-in-out"></span>
103      </button>
104    );
105  }
106
107  if (variant === "outline") {
108    return (
109      <button
110        className={`${baseClasses} relative overflow-hidden group bg-transparent ${className}`}
111      >
112        <span
113          className={`relative z-10 bg-clip-text text-transparent ${themeGradients[theme]}`}
114        >
115          {children}
116        </span>
117        <span
118          className={`absolute inset-0 rounded-lg ${themeGradients[theme]} opacity-100`}
119          style={{
120            mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
121            maskComposite: "xor",
122            WebkitMaskComposite: "xor",
123            padding: "2px",
124          }}
125        ></span>
126        <span className="absolute inset-0 rounded-lg blur opacity-0 group-hover:opacity-20 transition duration-1000 group-hover:duration-200"></span>
127      </button>
128    );
129  }
130
131  return (
132    <button className={`${baseClasses} ${themeGradients[theme]} ${className}`}>
133      {children}
134    </button>
135  );
136};
137