44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface GlitchButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children: React.ReactNode
|
|
variant?: 'default' | 'subtle'
|
|
glitchColor?: 'cyan' | 'pink' | 'purple' | 'magenta'
|
|
disabled?: boolean
|
|
}
|
|
|
|
export function GlitchButton({
|
|
children,
|
|
variant = 'default',
|
|
glitchColor = 'cyan',
|
|
disabled = false,
|
|
className,
|
|
...props
|
|
}: GlitchButtonProps) {
|
|
const glitchClasses = !disabled
|
|
? cn('glitch-btn-cyber', variant === 'subtle' && 'glitch-btn-subtle', 'relative')
|
|
: ''
|
|
|
|
const overlayColorClass = {
|
|
cyan: '',
|
|
pink: 'glitch-overlay-pink',
|
|
purple: 'glitch-overlay-purple',
|
|
magenta: 'glitch-overlay-magenta',
|
|
}[glitchColor]
|
|
|
|
return (
|
|
<button className={cn(glitchClasses, className)} disabled={disabled} {...props}>
|
|
{children}
|
|
|
|
{!disabled && (
|
|
<div className={cn('glitch-overlay', overlayColorClass)} aria-hidden="true">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|