X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fpages%2FAosFront.js;fp=resources%2Fjs%2Fcomponents%2Fpages%2FAosFront.js;h=9651110d3c80e134e88cb73e4de8472ea09c0019;hb=18cd02860ba7889360ce3547b44faa0daa807a5e;hp=d308f7d6b2ca3b349a9e1a0c3854cd56cd10c85c;hpb=25e1c9c43a09d438c20db17bc5239cbc45b454cd;p=alttp.git

diff --git a/resources/js/components/pages/AosFront.js b/resources/js/components/pages/AosFront.js
index d308f7d..9651110 100644
--- a/resources/js/components/pages/AosFront.js
+++ b/resources/js/components/pages/AosFront.js
@@ -1,9 +1,9 @@
 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';
@@ -11,10 +11,13 @@ const botUrl = `${authEndpoint}?client_id=${clientId}&scope=bot%20applications.c
 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>
@@ -28,7 +31,7 @@ const AosFront = () => {
 				>
 					<Icon.DISCORD />
 					{' '}
-					{i18n.t('aos.randoDiscord')}
+					{t('aos.randoDiscord')}
 				</Button>
 			</Col>
 			<Col className="text-center mb-3" sm={6} md={4}>
@@ -38,7 +41,7 @@ const AosFront = () => {
 					target="_blank"
 					variant="primary"
 				>
-					{i18n.t('aos.randoWeb')}
+					{t('aos.randoWeb')}
 				</Button>
 			</Col>
 			<Col className="text-center mb-3" sm={6} md={4}>
@@ -50,7 +53,7 @@ const AosFront = () => {
 				>
 					<Icon.DISCORD />
 					{' '}
-					{i18n.t('aos.tourneyDiscord')}
+					{t('aos.tourneyDiscord')}
 				</Button>
 			</Col>
 			<Col className="text-center mb-3" sm={6} md={4}>
@@ -62,7 +65,7 @@ const AosFront = () => {
 				>
 					<Icon.DISCORD />
 					{' '}
-					{i18n.t('aos.inviteBot')}
+					{t('aos.inviteBot')}
 				</Button>
 			</Col>
 			<Col className="text-center mb-3" sm={6} md={4}>
@@ -74,11 +77,11 @@ const AosFront = () => {
 				>
 					<Icon.DISCORD />
 					{' '}
-					{i18n.t('aos.inviteCommand')}
+					{t('aos.inviteCommand')}
 				</Button>
 			</Col>
 		</Row>
 	</Container>;
 };
 
-export default withTranslation()(AosFront);
+export default AosFront;