95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface GlowButtonProps {
|
|
children: ReactNode;
|
|
href?: string;
|
|
onClick?: () => void;
|
|
type?: "button" | "submit" | "reset";
|
|
variant?: "primary" | "secondary" | "ghost";
|
|
size?: "sm" | "md" | "lg";
|
|
className?: string;
|
|
icon?: ReactNode;
|
|
iconPosition?: "left" | "right";
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function GlowButton({
|
|
children,
|
|
href,
|
|
onClick,
|
|
type = "button",
|
|
variant = "primary",
|
|
size = "md",
|
|
className,
|
|
icon,
|
|
iconPosition = "right",
|
|
disabled = false,
|
|
}: GlowButtonProps) {
|
|
const sizeStyles = {
|
|
sm: "h-9 px-4 text-sm",
|
|
md: "h-11 px-6 text-sm",
|
|
lg: "h-13 px-8 text-base",
|
|
}[size];
|
|
|
|
const variantStyles = {
|
|
primary: cn(
|
|
"bg-gradient-to-r from-purple-300 via-purple-500 to-purple-700",
|
|
"text-white shadow-glow-md",
|
|
"hover:shadow-glow-lg hover:brightness-110",
|
|
),
|
|
secondary: cn(
|
|
"glass-strong text-text-primary",
|
|
"hover:border-purple-400/40 hover:bg-elevated/60",
|
|
),
|
|
ghost: cn("text-text-secondary hover:text-text-primary hover:bg-white/5"),
|
|
}[variant];
|
|
|
|
const inner = (
|
|
<motion.span
|
|
whileHover={disabled ? undefined : { y: -1 }}
|
|
whileTap={disabled ? undefined : { scale: 0.98 }}
|
|
className={cn(
|
|
"group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-xl font-medium tracking-tight transition-all duration-300",
|
|
sizeStyles,
|
|
variantStyles,
|
|
disabled && "pointer-events-none opacity-50",
|
|
className,
|
|
)}
|
|
>
|
|
{variant === "primary" && (
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/25 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
|
|
/>
|
|
)}
|
|
|
|
{icon && iconPosition === "left" && (
|
|
<span className="relative z-10 inline-flex shrink-0 transition-transform duration-300 group-hover:-translate-x-0.5">
|
|
{icon}
|
|
</span>
|
|
)}
|
|
<span className="relative z-10">{children}</span>
|
|
{icon && iconPosition === "right" && (
|
|
<span className="relative z-10 inline-flex shrink-0 transition-transform duration-300 group-hover:translate-x-0.5">
|
|
{icon}
|
|
</span>
|
|
)}
|
|
</motion.span>
|
|
);
|
|
|
|
if (href) {
|
|
return <Link href={href}>{inner}</Link>;
|
|
}
|
|
|
|
return (
|
|
<button type={type} onClick={onClick} disabled={disabled} className="inline-block">
|
|
{inner}
|
|
</button>
|
|
);
|
|
}
|