79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
interface ButtonProps {
|
|
children: React.ReactNode;
|
|
href?: string;
|
|
onClick?: () => void;
|
|
variant?: 'primary' | 'accent' | 'outline' | 'ghost';
|
|
className?: string;
|
|
showArrow?: boolean;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const Button = ({
|
|
children,
|
|
href,
|
|
onClick,
|
|
variant = 'primary',
|
|
className = '',
|
|
showArrow = false,
|
|
type = 'button',
|
|
disabled = false
|
|
}: ButtonProps) => {
|
|
const baseStyles = "inline-flex items-center justify-center px-8 py-4 rounded-xl font-bold uppercase tracking-widest text-xs transition-all duration-300 relative overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed";
|
|
|
|
const variants = {
|
|
primary: "bg-primary text-white hover:bg-primary-light hover:shadow-[0_0_20px_rgba(15,23,42,0.3)]",
|
|
accent: "bg-accent text-white hover:bg-accent-hover hover:shadow-[0_0_20px_rgba(16,185,129,0.3)]",
|
|
outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
|
|
ghost: "bg-slate-100 text-primary hover:bg-slate-200"
|
|
};
|
|
|
|
const content = (
|
|
<>
|
|
<span className="relative z-10 flex items-center gap-2">
|
|
{children}
|
|
{showArrow && (
|
|
<motion.span
|
|
animate={{ x: [0, 4, 0] }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
|
|
>
|
|
<ArrowRight size={16} strokeWidth={3} />
|
|
</motion.span>
|
|
)}
|
|
</span>
|
|
<motion.div
|
|
initial={{ x: '-100%' }}
|
|
whileHover={{ x: '100%' }}
|
|
transition={{ duration: 0.6, ease: "easeInOut" }}
|
|
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-12 pointer-events-none"
|
|
/>
|
|
</>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={`${baseStyles} ${variants[variant]} ${className}`}
|
|
>
|
|
{content}
|
|
</button>
|
|
);
|
|
};
|