57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type ButtonVariant = 'primary' | 'outline' | 'error' | 'outline-light' | 'success';
|
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
|
|
export interface ButtonClassesProps {
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
className?: string;
|
|
}
|
|
|
|
export function buttonClasses({ variant = 'primary', size = 'md', className }: ButtonClassesProps = {}) {
|
|
const baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors font-bold uppercase tracking-wider rounded-md';
|
|
|
|
const variantClasses = {
|
|
primary: 'bg-primary text-white hover:bg-primary/90 border-2 border-primary',
|
|
outline: 'bg-transparent text-primary border-2 border-primary hover:bg-primary/5',
|
|
'outline-light': 'bg-transparent text-white border-2 border-white hover:bg-white/10',
|
|
error: 'bg-red-600 text-white hover:bg-red-700 border-2 border-red-600',
|
|
success: 'bg-green-600 text-white hover:bg-green-700 border-2 border-green-600',
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-6 py-2.5 text-xs',
|
|
md: 'px-8 py-3.5 text-sm',
|
|
lg: 'px-10 py-5 text-base',
|
|
};
|
|
|
|
return cn(
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
sizeClasses[size],
|
|
className
|
|
);
|
|
}
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonClassesProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ className, variant, size, children, ...props }, ref) => {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={buttonClasses({ variant, size, className })}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
Button.displayName = 'Button';
|