74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { cn } from './utils';
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'accent' | 'saturated' | 'outline' | 'ghost' | 'white';
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
href?: string;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
|
|
const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
|
|
|
|
const variants = {
|
|
primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
|
|
secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
|
|
accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
|
|
saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
|
|
outline: 'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
|
|
ghost: 'text-primary hover:shadow-lg',
|
|
white: 'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'h-9 px-4 text-sm md:text-base',
|
|
md: 'h-11 px-6 text-base md:text-lg',
|
|
lg: 'h-14 px-8 text-base md:text-lg',
|
|
xl: 'h-16 px-10 text-lg md:text-xl',
|
|
};
|
|
|
|
const styles = cn(baseStyles, variants[variant], sizes[size], className);
|
|
|
|
const overlayColors = {
|
|
primary: 'bg-primary-dark',
|
|
secondary: 'bg-secondary-light',
|
|
accent: 'bg-accent-dark',
|
|
saturated: 'bg-primary',
|
|
outline: 'bg-primary',
|
|
ghost: 'bg-primary-light/10',
|
|
white: 'bg-primary-light',
|
|
};
|
|
|
|
const content = (
|
|
<>
|
|
<span className={cn(
|
|
"relative z-10 flex items-center justify-center gap-2 transition-colors duration-500",
|
|
variant === 'white' ? "group-hover/btn:text-primary-dark" : ""
|
|
)}>
|
|
{props.children}
|
|
</span>
|
|
<span className={cn(
|
|
"absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out",
|
|
overlayColors[variant]
|
|
)} />
|
|
</>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className={styles}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button className={styles} {...props}>
|
|
{content}
|
|
</button>
|
|
);
|
|
}
|