owncast/web/components/action-buttons/ActionButton/ActionButton.tsx
James Young 5ebbbb8bf2
refactor(stories): co-locate stories with components (#2078)
* refactor: move ActionButton component

* refactor: move BanUserButton component

* refactor: move ChatActionMessage component

* refactor: move ChatContainer component

* refactor: move AuthModal component

* refactor: move BrowserNotifyModal component

* refactor: move ChatUserMessage component

* refactor: move ChatJoinMessage component

* refactor: move ChatTextField component

* refactor: move ChatUserBadge component

* refactor: move FollowerCollection and SingleFollower components

* fix: bad import path

* refactor: move FollowModal component

* refactor: move Modal component

* refactor: move ContentHeader component

* refactor: move ChatSystemMessage component

* refactor: move Header component

* refactor: move Footer component

* refactor: move StatusBar component

* refactor: move OfflineBanner component

* refactor: move OwncastPlayer component

* refactor: move IndieAuthModal component

* refactor: move SocialLinks component

* refactor: move VideoPoster component

* refactor: move FollowModal component

* refactor: move FediAuthModal.tsx component

* refactor: move UserDropdown component

* refactor: move ChatSocialMessage component

* refactor: move Logo component

* refactor: move NotifyReminderPopup component

* refactor: move NameChangeModal component

* refactor: move FatalErrorStateModal component

* refactor: move ChatModeratorNotification component

* refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components

* refactor: move CustomPageContent component

* refactor: move storybook Introduction file

* refactor: update storybook story import path

* refactor: move storybook preview styles

* refactor: move storybook doc pages

* refactor: move Color and ImageAsset components

* fix: bad import path

* fix: bad import path in story file
2022-09-03 11:38:52 -07:00

49 lines
1.1 KiB
TypeScript

import { Button } from 'antd';
import { useState } from 'react';
import Modal from '../../ui/Modal/Modal';
import { ExternalAction } from '../../../interfaces/external-action';
import s from './ActionButton.module.scss';
interface Props {
action: ExternalAction;
primary?: boolean;
}
ActionButton.defaultProps = {
primary: true,
};
export default function ActionButton({
action: { url, title, description, icon, color, openExternally },
primary = false,
}: Props) {
const [showModal, setShowModal] = useState(false);
const buttonClicked = () => {
if (openExternally) {
window.open(url, '_blank');
} else {
setShowModal(true);
}
};
return (
<>
<Button
type={primary ? 'primary' : 'default'}
className={`${s.button}`}
onClick={buttonClicked}
style={{ backgroundColor: color }}
>
<img src={icon} className={`${s.icon}`} alt={description} />
{title}
</Button>
<Modal
title={description || title}
url={url}
visible={showModal}
height="80vh"
handleCancel={() => setShowModal(false)}
/>
</>
);
}