resources/js/components/pages/AosFront.js

   1 import React from 'react';
   2 import { Button, Col, Container, Row } from 'react-bootstrap';
   3 import { Helmet } from 'react-helmet';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import Icon from '../common/Icon';
   7
   8 const authEndpoint = 'https://discord.com/oauth2/authorize';
   9 const clientId = '951113702839549982';
  10 const botUrl = `${authEndpoint}?client_id=${clientId}&scope=bot%20applications.commands`;
  11 const commandUrl = `${authEndpoint}?client_id=${clientId}&scope=applications.commands`;
  12
  13 const AosFront = () => {
  14         const { t } = useTranslation();
  15
  16         return <Container>
  17                 <Helmet>
  18                         <title>AoS</title>
  19                         <meta name="description" content="Castlevania: Aria of Sorrow" />
  20                 </Helmet>
  21                 <div className="my-5 text-center">
  22                         <h1>Castlevania: Aria of Sorrow</h1>
  23                 </div>
  24                 <Row>
  25                         <Col className="text-center mb-3" sm={6} md={4}>
  26                                 <Button
  27                                         href="https://discord.gg/VEtVYNr"
  28                                         size="lg"
  29                                         target="_blank"
  30                                         variant="discord"
  31                                 >
  32                                         <Icon.DISCORD />
  33                                         {' '}
  34                                         {t('aos.randoDiscord')}
  35                                 </Button>
  36                         </Col>
  37                         <Col className="text-center mb-3" sm={6} md={4}>
  38                                 <Button
  39                                         href="https://aosrando.surge.sh/"
  40                                         size="lg"
  41                                         target="_blank"
  42                                         variant="primary"
  43                                 >
  44                                         {t('aos.randoWeb')}
  45                                 </Button>
  46                         </Col>
  47                         <Col className="text-center mb-3" sm={6} md={4}>
  48                                 <Button
  49                                         href="https://discord.gg/ApVyJnd"
  50                                         size="lg"
  51                                         target="_blank"
  52                                         variant="discord"
  53                                 >
  54                                         <Icon.DISCORD />
  55                                         {' '}
  56                                         {t('aos.tourneyDiscord')}
  57                                 </Button>
  58                         </Col>
  59                         <Col className="text-center mb-3" sm={6} md={4}>
  60                                 <Button
  61                                         href={botUrl}
  62                                         size="lg"
  63                                         target="_blank"
  64                                         variant="discord"
  65                                 >
  66                                         <Icon.DISCORD />
  67                                         {' '}
  68                                         {t('aos.inviteBot')}
  69                                 </Button>
  70                         </Col>
  71                         <Col className="text-center mb-3" sm={6} md={4}>
  72                                 <Button
  73                                         href={commandUrl}
  74                                         size="lg"
  75                                         target="_blank"
  76                                         variant="discord"
  77                                 >
  78                                         <Icon.DISCORD />
  79                                         {' '}
  80                                         {t('aos.inviteCommand')}
  81                                 </Button>
  82                         </Col>
  83                 </Row>
  84         </Container>;
  85 };
  86
  87 export default AosFront;