+import React from 'react';
+import { Alert, Container } from 'react-bootstrap';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+
+import Controls from '../components/twitch-bot/Controls';
+import { mayManageTwitchBot } from '../helpers/permissions';
+import { useUser } from '../helpers/UserContext';
+
+const TwitchBot = () => {
+ const { t } = useTranslation();
+ const user = useUser();
+
+ return <Container>
+ <h1>{t('twitchBot.heading')}</h1>
+ <Helmet>
+ <title>{t('twitchBot.heading')}</title>
+ </Helmet>
+ {mayManageTwitchBot(user) ? <>
+ <h2>{t('twitchBot.controls')}</h2>
+ <Controls />
+ </> :
+ <Alert variant="info">
+ {t('twitchBot.noManagePermission')}
+ </Alert>
+ }
+ </Container>;
+};
+
+export default TwitchBot;