2022-03-13 14:40:38 +08:00
|
|
|
import { ReactNode } from 'react'
|
|
|
|
|
|
|
|
const IconButton = ({
|
|
|
|
children,
|
|
|
|
onClick,
|
|
|
|
disabled,
|
|
|
|
className,
|
|
|
|
}: {
|
|
|
|
children: ReactNode
|
|
|
|
onClick: () => void
|
|
|
|
disabled?: boolean | undefined
|
|
|
|
className?: string
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<button
|
|
|
|
onClick={onClick}
|
|
|
|
className={classNames(
|
|
|
|
className,
|
|
|
|
'relative transform cursor-default p-2 transition duration-200',
|
|
|
|
!disabled &&
|
2022-03-17 14:45:04 +08:00
|
|
|
'btn-pressed-animation btn-hover-animation after:bg-black/[.06] dark:after:bg-white/10',
|
2022-03-13 14:40:38 +08:00
|
|
|
disabled && 'opacity-30'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default IconButton
|