56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
import React, { ButtonHTMLAttributes, AnchorHTMLAttributes, ReactNode } from 'react';
|
|
|
|
type ButtonAsButton = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
as?: 'button';
|
|
href?: never;
|
|
};
|
|
|
|
type ButtonAsLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
as: 'a';
|
|
href: string;
|
|
};
|
|
|
|
type ButtonProps = (ButtonAsButton | ButtonAsLink) & {
|
|
variant?: 'primary' | 'secondary' | 'danger' | 'race-performance' | 'race-final';
|
|
children: ReactNode;
|
|
};
|
|
|
|
export default function Button({
|
|
variant = 'primary',
|
|
children,
|
|
className = '',
|
|
as = 'button',
|
|
...props
|
|
}: ButtonProps) {
|
|
const baseStyles = 'inline-flex items-center min-h-[44px] rounded-full px-6 py-3 text-sm font-semibold transition-all duration-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 hover:scale-[1.03] active:scale-95';
|
|
|
|
const variantStyles = {
|
|
primary: 'bg-primary-blue text-white shadow-[0_0_15px_rgba(25,140,255,0.4)] hover:shadow-[0_0_25px_rgba(25,140,255,0.6)] active:ring-2 active:ring-primary-blue focus-visible:outline-primary-blue',
|
|
secondary: 'bg-iron-gray text-white border border-charcoal-outline shadow-[0_0_10px_rgba(25,140,255,0.2)] hover:shadow-[0_0_20px_rgba(25,140,255,0.4)] hover:border-primary-blue focus-visible:outline-primary-blue',
|
|
danger: 'bg-red-600 text-white shadow-[0_0_15px_rgba(248,113,113,0.4)] hover:shadow-[0_0_25px_rgba(248,113,113,0.6)] active:ring-2 active:ring-red-600 focus-visible:outline-red-600',
|
|
'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:shadow-[0_0_25px_rgba(251,191,36,0.6)] hover:from-yellow-500 hover:to-orange-600 active:ring-2 active:ring-yellow-400 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:shadow-[0_0_25px_rgba(168,85,247,0.6)] hover:from-purple-500 hover:to-pink-600 active:ring-2 active:ring-purple-400 focus-visible:outline-purple-400'
|
|
} as const;
|
|
|
|
const classes = `${baseStyles} ${variantStyles[variant]} ${className}`;
|
|
|
|
if (as === 'a') {
|
|
return (
|
|
<a
|
|
className={classes}
|
|
{...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className={classes}
|
|
{...(props as ButtonHTMLAttributes<HTMLButtonElement>)}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
} |