resources/js/components/twitch-bot/Command.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import Icon from '../common/Icon';
   7
   8 const Command = ({
   9         name,
  10         onEditCommand,
  11         onRemoveCommand,
  12         settings,
  13 }) => {
  14         const { t } = useTranslation();
  15
  16         const type = (settings && settings.command) || 'none';
  17
  18         return <tr>
  19                 <td>{`!${name}`}</td>
  20                 <td>{t(`twitchBot.commandRestrictions.${(settings && settings.restrict) || 'none'}`)}</td>
  21                 <td>{t(`twitchBot.commandTypes.${type}`)}</td>
  22                 <td className="text-end">
  23                         <div className="button-bar">
  24                                 {onEditCommand ?
  25                                         <Button
  26                                                 onClick={() => onEditCommand(name, settings)}
  27                                                 title={t('button.edit')}
  28                                                 variant="outline-secondary"
  29                                         >
  30                                                 <Icon.EDIT title="" />
  31                                         </Button>
  32                                 : null}
  33                                 {onRemoveCommand ?
  34                                         <Button
  35                                                 onClick={() => onRemoveCommand(name)}
  36                                                 title={t('button.remove')}
  37                                                 variant="outline-danger"
  38                                         >
  39                                                 <Icon.REMOVE title="" />
  40                                         </Button>
  41                                 : null}
  42                         </div>
  43                 </td>
  44         </tr>;
  45 };
  46
  47 Command.propTypes = {
  48         name: PropTypes.string,
  49         onEditCommand: PropTypes.func,
  50         onRemoveCommand: PropTypes.func,
  51         settings: PropTypes.shape({
  52                 command: PropTypes.string,
  53                 restrict: PropTypes.string,
  54         }),
  55 };
  56
  57 export default Command;