import React from 'react';
import { Button, Col, Container, Row } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
import Icon from '../common/Icon';
-import i18n from '../../i18n';
const authEndpoint = 'https://discord.com/oauth2/authorize';
const clientId = '951113702839549982';
const commandUrl = `${authEndpoint}?client_id=${clientId}&scope=applications.commands`;
const AosFront = () => {
- React.useEffect(() => {
- window.document.title = 'Aos';
- }, []);
+ const { t } = useTranslation();
+
return <Container>
+ <Helmet>
+ <title>AoS</title>
+ <meta name="description" content="Castlevania: Aria of Sorrow" />
+ </Helmet>
<div className="my-5 text-center">
<h1>Castlevania: Aria of Sorrow</h1>
</div>
>
<Icon.DISCORD />
{' '}
- {i18n.t('aos.randoDiscord')}
+ {t('aos.randoDiscord')}
</Button>
</Col>
<Col className="text-center mb-3" sm={6} md={4}>
target="_blank"
variant="primary"
>
- {i18n.t('aos.randoWeb')}
+ {t('aos.randoWeb')}
</Button>
</Col>
<Col className="text-center mb-3" sm={6} md={4}>
>
<Icon.DISCORD />
{' '}
- {i18n.t('aos.tourneyDiscord')}
+ {t('aos.tourneyDiscord')}
</Button>
</Col>
<Col className="text-center mb-3" sm={6} md={4}>
>
<Icon.DISCORD />
{' '}
- {i18n.t('aos.inviteBot')}
+ {t('aos.inviteBot')}
</Button>
</Col>
<Col className="text-center mb-3" sm={6} md={4}>
>
<Icon.DISCORD />
{' '}
- {i18n.t('aos.inviteCommand')}
+ {t('aos.inviteCommand')}
</Button>
</Col>
</Row>
</Container>;
};
-export default withTranslation()(AosFront);
+export default AosFront;