2021-12-02 03:06:24 +01:00
|
|
|
interface ButtonProps {
|
|
|
|
text?: string,
|
|
|
|
icon?: string,
|
2021-12-25 23:58:45 +01:00
|
|
|
loading?: boolean,
|
2022-01-10 04:04:29 +01:00
|
|
|
onClick: () => void,
|
2021-12-25 23:58:45 +01:00
|
|
|
}
|
|
|
|
|
2022-01-10 04:04:29 +01:00
|
|
|
function Button(props: ButtonProps): JSX.Element {
|
2021-12-02 03:06:24 +01:00
|
|
|
|
2022-01-10 04:04:29 +01:00
|
|
|
function handleTouchEnd(event: React.TouchEvent<HTMLButtonElement>) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
props.onClick();
|
|
|
|
}
|
2021-12-27 19:06:31 +01:00
|
|
|
|
2021-12-02 03:06:24 +01:00
|
|
|
return (
|
|
|
|
<button
|
2022-01-10 04:04:29 +01:00
|
|
|
type="button"
|
|
|
|
onClick={props.onClick}
|
|
|
|
onTouchEnd={handleTouchEnd}
|
|
|
|
className="bg-gray-400 dark:bg-gray-600 hover:bg-gray-500 relative focus:outline-none h-20 text-white font-semibold rounded-md items-center flex justify-center">
|
2021-12-02 03:06:24 +01:00
|
|
|
{
|
2021-12-02 03:57:00 +01:00
|
|
|
props.icon && <img src={props.icon} className="w-12 h-12 mr-2 -ml-4" />
|
2021-12-02 03:06:24 +01:00
|
|
|
}
|
|
|
|
{props.text}
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Button;
|