55 lines
1.1 KiB
TypeScript
55 lines
1.1 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>
|
|
)
|
|
}
|