owncast/web/components/action-buttons/ActionButton.tsx

39 lines
940 B
TypeScript
Raw Normal View History

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;
}
export default function ActionButton({
action: { url, title, description, icon, openExternally },
}: 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
<>
<Button type="primary" className={`${s.button}`} onClick={buttonClicked}>
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}
handleCancel={() => setShowModal(false)}
/>
</>
2022-05-06 01:01:23 +03:00
);
}