56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { CSSProperties } from 'react'
|
|
|
|
import clsx from 'clsx'
|
|
|
|
interface ButtonProps {
|
|
label?: string
|
|
onClick?: () => void
|
|
variant?: 'primary' | 'secondary' | 'ghost' | 'outline'
|
|
icon?: React.ReactNode
|
|
className?: string
|
|
style?: CSSProperties
|
|
disabled?: boolean
|
|
ref?: React.ForwardedRef<HTMLButtonElement>
|
|
}
|
|
|
|
export const Button = ({
|
|
label,
|
|
onClick,
|
|
variant = 'primary',
|
|
icon,
|
|
className,
|
|
style,
|
|
disabled,
|
|
ref,
|
|
...props
|
|
}: ButtonProps) => {
|
|
const variantCls = {
|
|
primary: 'text-white bg-primary xs:hover:opacity-75',
|
|
secondary:
|
|
'text-black dark:text-white bg-zinc-100 dark:bg-white/10 xs:hover:opacity-75',
|
|
ghost:
|
|
'text-black dark:text-gray-200 hover:bg-zinc-100 dark:hover:bg-white/10 xs:hover:opacity-75',
|
|
outline:
|
|
'text-black dark:text-white bg-white dark:bg-midnight-slate border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary dark:sm:hover:border-white dark:disabled:hover:border-zinc-400',
|
|
}[variant]
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
className={clsx(
|
|
'h-12 px-5 flex items-center justify-center gap-2 text-base font-medium text-nowrap outline-none rounded-full transition-all duration-300 disabled:opacity-50',
|
|
!disabled && 'group',
|
|
variantCls,
|
|
className
|
|
)}
|
|
style={style}
|
|
{...props}
|
|
>
|
|
{label}
|
|
{icon}
|
|
</button>
|
|
)
|
|
}
|