hamid zarghami
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { FC, ReactNode } from 'react'
|
|
import { clx } from '../helpers/utils'
|
|
import MoonLoader from "react-spinners/ClipLoader"
|
|
|
|
|
|
interface ButtonProps {
|
|
label?: string;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
loading?: boolean;
|
|
onClick?: () => void;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
disabled?: boolean;
|
|
variant?: 'primary' | 'secondary'
|
|
}
|
|
|
|
const Button: FC<ButtonProps> = (props) => {
|
|
|
|
const buttonClass = clx(
|
|
'w-full bg-primary text-white cursor-pointer rounded-xl font-normal text-xs md:text-sm h-10 px-3 md:px-4 transition-all duration-200 hover:bg-opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
|
|
props.variant === 'secondary' && 'bg-[#ECEEF5] text-black',
|
|
props.className
|
|
)
|
|
|
|
return (
|
|
<button
|
|
onClick={props.onClick}
|
|
type={props.type || 'button'}
|
|
disabled={props.disabled || props.loading}
|
|
className={buttonClass}
|
|
>
|
|
{props.loading ? (
|
|
<MoonLoader className='mt-1.5' size={15} color={props.variant === 'secondary' ? '#000' : '#fff'} />
|
|
|
|
) : (
|
|
props.children || props.label
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default Button |