guessing game settings

[alttp.git] / resources / js / components / twitch-bot / Command.js

diff --git a/resources/js/components/twitch-bot/Command.js b/resources/js/components/twitch-bot/Command.js
new file mode 100644 (file)
index 0000000..9122086
--- /dev/null
+++ b/resources/js/components/twitch-bot/Command.js
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+
+const Command = ({
+       name,
+       onEditCommand,
+       onRemoveCommand,
+       settings,
+}) => {
+       const { t } = useTranslation();
+
+       const type = (settings && settings.command) || 'none';
+
+       return <tr>
+               <td>{`!${name}`}</td>
+               <td>{t(`twitchBot.commandRestrictions.${(settings && settings.restrict) || 'none'}`)}</td>
+               <td>{t(`twitchBot.commandTypes.${type}`)}</td>
+               <td className="text-end">
+                       <div className="button-bar">
+                               {onEditCommand ?
+                                       <Button
+                                               onClick={() => onEditCommand(name, settings)}
+                                               title={t('button.edit')}
+                                               variant="outline-secondary"
+                                       >
+                                               <Icon.EDIT title="" />
+                                       </Button>
+                               : null}
+                               {onRemoveCommand ?
+                                       <Button
+                                               onClick={() => onRemoveCommand(name)}
+                                               title={t('button.remove')}
+                                               variant="outline-danger"
+                                       >
+                                               <Icon.REMOVE title="" />
+                                       </Button>
+                               : null}
+                       </div>
+               </td>
+       </tr>;
+};
+
+Command.propTypes = {
+       name: PropTypes.string,
+       onEditCommand: PropTypes.func,
+       onRemoveCommand: PropTypes.func,
+       settings: PropTypes.shape({
+               command: PropTypes.string,
+               restrict: PropTypes.string,
+       }),
+};
+
+export default Command;