108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'ghost'
|
|
export type ButtonSize = 'small' | 'medium' | 'large'
|
|
|
|
interface ButtonProps {
|
|
children: ReactNode
|
|
variant?: ButtonVariant
|
|
size?: ButtonSize
|
|
disabled?: boolean
|
|
loading?: boolean
|
|
onClick?: () => void
|
|
type?: 'button' | 'submit' | 'reset'
|
|
className?: string
|
|
'aria-label'?: string
|
|
}
|
|
|
|
function getVariantClasses(variant: ButtonVariant): string {
|
|
switch (variant) {
|
|
case 'primary':
|
|
return 'bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan border-neon-cyan/50 hover:shadow-glow-cyan'
|
|
case 'secondary':
|
|
return 'bg-cyber-light hover:bg-cyber-dark text-cyber-accent border-neon-cyan/30 hover:border-neon-cyan/50'
|
|
case 'success':
|
|
return 'bg-neon-green/20 hover:bg-neon-green/30 text-neon-green border-neon-green/50 hover:shadow-glow-green'
|
|
case 'danger':
|
|
return 'bg-red-500/20 hover:bg-red-500/30 text-red-400 border-red-500/50'
|
|
case 'ghost':
|
|
return 'bg-transparent hover:bg-cyber-light text-cyber-accent border-transparent hover:border-neon-cyan/30'
|
|
default:
|
|
return 'bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan border-neon-cyan/50 hover:shadow-glow-cyan'
|
|
}
|
|
}
|
|
|
|
function getSizeClasses(size: ButtonSize): string {
|
|
switch (size) {
|
|
case 'small':
|
|
return 'px-3 py-1.5 text-sm'
|
|
case 'medium':
|
|
return 'px-4 py-2 text-base'
|
|
case 'large':
|
|
return 'px-6 py-3 text-lg'
|
|
default:
|
|
return 'px-4 py-2 text-base'
|
|
}
|
|
}
|
|
|
|
function LoadingSpinner(): React.ReactElement {
|
|
return (
|
|
<svg
|
|
className="animate-spin h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export function Button({
|
|
children,
|
|
variant = 'primary',
|
|
size = 'medium',
|
|
disabled = false,
|
|
loading = false,
|
|
onClick,
|
|
type = 'button',
|
|
className = '',
|
|
'aria-label': ariaLabel,
|
|
}: ButtonProps): React.ReactElement {
|
|
const variantClasses = getVariantClasses(variant)
|
|
const sizeClasses = getSizeClasses(size)
|
|
const baseClasses = 'inline-flex items-center justify-center rounded-lg font-medium transition-all border focus:outline-none focus:ring-2 focus:ring-neon-cyan disabled:opacity-50 disabled:cursor-not-allowed'
|
|
|
|
const combinedClasses = `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`.trim()
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
disabled={disabled || loading}
|
|
className={combinedClasses}
|
|
aria-label={ariaLabel}
|
|
aria-busy={loading}
|
|
>
|
|
{loading && (
|
|
<span className="mr-2">
|
|
<LoadingSpinner />
|
|
</span>
|
|
)}
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|