hamid zarghami
28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
|
|
import ReactLoading from 'react-loading'
|
|
import { XOR } from '../helpers/types'
|
|
import { clx } from '../helpers/utils'
|
|
type Props = {
|
|
className?: string;
|
|
isLoading?: boolean,
|
|
} & ButtonHTMLAttributes<HTMLButtonElement> &
|
|
XOR<{ children: ReactNode }, { label: string, icon?: string, isLoading?: boolean }>;
|
|
const Button: FC<Props> = memo((props: Props) => {
|
|
const buttonClass = clx(
|
|
'flex rounded-xl items-center justify-center text-center h-10 text-sm bg-primary text-white w-full',
|
|
props.disabled && 'cursor-not-allowed opacity-30',
|
|
props.className
|
|
);
|
|
return (
|
|
<button {...props} className={`${buttonClass} ${props.className}`} >
|
|
<img src={props.icon} alt="" />
|
|
{
|
|
props.isLoading ?
|
|
<ReactLoading type='spin' color={'white'} width={20} height={20} />
|
|
:
|
|
props.label || props.children
|
|
}
|
|
</button>
|
|
)
|
|
})
|
|
export default Button |