105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes, forwardRef } from 'react';
|
|
import { Stack } from './Stack';
|
|
import { Box, BoxProps } from './Box';
|
|
|
|
interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'onMouseEnter' | 'onMouseLeave' | 'onSubmit'>, Omit<BoxProps<'button'>, 'as' | 'onClick' | 'onSubmit'> {
|
|
children: ReactNode;
|
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
className?: string;
|
|
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-performance' | 'race-final' | 'discord';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
disabled?: boolean;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
icon?: ReactNode;
|
|
fullWidth?: boolean;
|
|
as?: 'button' | 'a';
|
|
href?: string;
|
|
target?: string;
|
|
rel?: string;
|
|
}
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
|
|
children,
|
|
onClick,
|
|
className = '',
|
|
variant = 'primary',
|
|
size = 'md',
|
|
disabled = false,
|
|
type = 'button',
|
|
icon,
|
|
fullWidth = false,
|
|
as = 'button',
|
|
href,
|
|
target,
|
|
rel,
|
|
...props
|
|
}, ref) => {
|
|
const baseClasses = 'inline-flex items-center rounded-lg transition-all duration-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 hover:scale-[1.02] active:scale-95';
|
|
|
|
const variantClasses = {
|
|
primary: 'bg-primary-blue text-white hover:bg-primary-blue/80 focus-visible:outline-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.4)]',
|
|
secondary: 'bg-iron-gray text-white border border-charcoal-outline hover:bg-iron-gray/80 focus-visible:outline-primary-blue',
|
|
danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-600',
|
|
ghost: 'bg-transparent text-gray-400 hover:bg-gray-800 focus-visible:outline-gray-400',
|
|
'race-performance': 'bg-gradient-to-r from-yellow-400 to-orange-500 text-white shadow-[0_0_15px_rgba(251,191,36,0.4)] hover:from-yellow-500 hover:to-orange-600 focus-visible:outline-yellow-400',
|
|
'race-final': 'bg-gradient-to-r from-purple-400 to-pink-500 text-white shadow-[0_0_15px_rgba(168,85,247,0.4)] hover:from-purple-500 hover:to-pink-600 focus-visible:outline-purple-400',
|
|
discord: 'bg-[#5865F2] text-white hover:bg-[#4752C4] shadow-[0_0_20px_rgba(88,101,242,0.3)] hover:shadow-[0_0_30px_rgba(88,101,242,0.6)] focus-visible:outline-[#5865F2]'
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'min-h-[36px] px-3 py-1.5 text-xs',
|
|
md: 'min-h-[44px] px-4 py-2 text-sm',
|
|
lg: 'min-h-[52px] px-6 py-3 text-base'
|
|
};
|
|
|
|
const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
|
|
const widthClasses = fullWidth ? 'w-full' : '';
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses[variant],
|
|
sizeClasses[size],
|
|
disabledClasses,
|
|
widthClasses,
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
const content = icon ? (
|
|
<Stack direction="row" align="center" gap={2} center={fullWidth}>
|
|
{icon}
|
|
{children}
|
|
</Stack>
|
|
) : children;
|
|
|
|
if (as === 'a') {
|
|
return (
|
|
<Box
|
|
as="a"
|
|
href={href}
|
|
target={target}
|
|
rel={rel}
|
|
className={classes}
|
|
{...props}
|
|
>
|
|
{content}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
as="button"
|
|
ref={ref}
|
|
type={type}
|
|
className={classes}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
{...props}
|
|
>
|
|
{content}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
Button.displayName = 'Button';
|