2022-05-06 01:01:23 +03:00
|
|
|
import { Button } from 'antd';
|
2022-05-10 01:34:02 +03:00
|
|
|
import { useState } from 'react';
|
|
|
|
import Modal from '../ui/Modal/Modal';
|
2022-05-12 09:31:31 +03:00
|
|
|
import { ExternalAction } from '../../interfaces/external-action';
|
2022-05-08 02:13:06 +03:00
|
|
|
import s from './ActionButton.module.scss';
|
2022-05-06 01:01:23 +03:00
|
|
|
|
|
|
|
interface Props {
|
|
|
|
action: ExternalAction;
|
|
|
|
}
|
|
|
|
|
2022-05-22 15:27:06 +03:00
|
|
|
export default function ActionButton({
|
2022-07-13 03:37:40 +03:00
|
|
|
action: { url, title, description, icon, color, openExternally },
|
2022-05-22 15:27:06 +03:00
|
|
|
}: Props) {
|
2022-05-10 01:34:02 +03:00
|
|
|
const [showModal, setShowModal] = useState(false);
|
2022-05-06 01:01:23 +03:00
|
|
|
|
2022-05-10 01:34:02 +03:00
|
|
|
const buttonClicked = () => {
|
|
|
|
if (openExternally) {
|
|
|
|
window.open(url, '_blank');
|
|
|
|
} else {
|
|
|
|
setShowModal(true);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-05-06 01:01:23 +03:00
|
|
|
return (
|
2022-05-10 01:34:02 +03:00
|
|
|
<>
|
2022-07-13 03:37:40 +03:00
|
|
|
<Button
|
|
|
|
type="primary"
|
|
|
|
className={`${s.button}`}
|
|
|
|
onClick={buttonClicked}
|
|
|
|
style={{ backgroundColor: color }}
|
|
|
|
>
|
2022-05-10 01:34:02 +03:00
|
|
|
<img src={icon} className={`${s.icon}`} alt={description} />
|
|
|
|
{title}
|
|
|
|
</Button>
|
|
|
|
<Modal
|
|
|
|
title={description || title}
|
|
|
|
url={url}
|
|
|
|
visible={showModal}
|
2022-05-30 07:52:38 +03:00
|
|
|
height="80vh"
|
2022-05-10 01:34:02 +03:00
|
|
|
handleCancel={() => setShowModal(false)}
|
|
|
|
/>
|
|
|
|
</>
|
2022-05-06 01:01:23 +03:00
|
|
|
);
|
|
|
|
}
|