resources/js/components/common/Footer.js

   1 import React from 'react';
   2 import { Col, Nav, Row } from 'react-bootstrap';
   3 import { useTranslation } from 'react-i18next';
   4 import { LinkContainer } from 'react-router-bootstrap';
   5
   6 import PrivacyDialog from './PrivacyDialog';
   7
   8 const Footer = () => {
   9         const [showDialog, setShowDialog] = React.useState(false);
  10
  11         const { t } = useTranslation();
  12
  13         return <footer className="bg-dark mt-5 px-3 py-5">
  14                 <Row>
  15                         <Col md={4}>
  16                                 <h5>{t('footer.competitions')}</h5>
  17                                 <Nav as="ul" className="flex-column">
  18                                         <Nav.Item as="li">
  19                                                 <LinkContainer to="/tournaments/6">
  20                                                         <Nav.Link className="p-0 text-muted" href="/tournaments/6">
  21                                                                 Deutsche ALttP Community - Seed der Woche
  22                                                         </Nav.Link>
  23                                                 </LinkContainer>
  24                                         </Nav.Item>
  25                                         <Nav.Item as="li">
  26                                                 <LinkContainer to="/tournaments/5">
  27                                                         <Nav.Link className="p-0 text-muted" href="/tournaments/5">
  28                                                                 Wörterbuch - Super Metroid Async
  29                                                         </Nav.Link>
  30                                                 </LinkContainer>
  31                                         </Nav.Item>
  32                                 </Nav>
  33                         </Col>
  34                         <Col md={4}>
  35                                 <h5>{t('footer.resources')}</h5>
  36                                 <Nav as="ul" className="flex-column">
  37                                         <Nav.Item as="li">
  38                                                 <Nav.Link
  39                                                         className="p-0 text-muted"
  40                                                         href="https://alttp-wiki.net/"
  41                                                         target="_blank"
  42                                                 >
  43                                                         {t('footer.alttpwiki')}
  44                                                 </Nav.Link>
  45                                         </Nav.Item>
  46                                         <Nav.Item as="li">
  47                                                 <LinkContainer to="/tech">
  48                                                         <Nav.Link className="p-0 text-muted" href="/tech">
  49                                                                 ALttP Tech Index
  50                                                         </Nav.Link>
  51                                                 </LinkContainer>
  52                                         </Nav.Item>
  53                                         <Nav.Item as="li">
  54                                                 <Nav.Link
  55                                                         className="p-0 text-muted"
  56                                                         href="https://wiki.supermetroid.run/"
  57                                                         target="_blank"
  58                                                 >
  59                                                         {t('footer.smwiki')}
  60                                                 </Nav.Link>
  61                                         </Nav.Item>
  62                                 </Nav>
  63                         </Col>
  64                         <Col md={4}>
  65                                 <h5>{t('footer.info')}</h5>
  66                                 <Nav as="ul" className="flex-column">
  67                                         <Nav.Item as="li">
  68                                                 <Nav.Link
  69                                                         className="p-0 text-muted"
  70                                                         onClick={() => { setShowDialog(true); }}
  71                                                 >
  72                                                         {t('footer.privacy')}
  73                                                 </Nav.Link>
  74                                         </Nav.Item>
  75                                         <Nav.Item as="li">
  76                                                 <Nav.Link
  77                                                         className="p-0 text-muted"
  78                                                         href="https://discord.gg/5zuANcS"
  79                                                         target="_blank"
  80                                                 >
  81                                                         {t('footer.alttpde')}
  82                                                 </Nav.Link>
  83                                         </Nav.Item>
  84                                         <Nav.Item as="li">
  85                                                 <Nav.Link
  86                                                         className="p-0 text-muted"
  87                                                         href="https://discord.com/invite/GGdrbnQmVs"
  88                                                         target="_blank"
  89                                                 >
  90                                                         {t('footer.smd')}
  91                                                 </Nav.Link>
  92                                         </Nav.Item>
  93                                         <Nav.Item as="li">
  94                                                 <Nav.Link
  95                                                         className="p-0 text-muted"
  96                                                         href="https://discord.gg/hVw5Zeq"
  97                                                         target="_blank"
  98                                                 >
  99                                                         {t('footer.connect')}
 100                                                 </Nav.Link>
 101                                         </Nav.Item>
 102                                 </Nav>
 103                         </Col>
 104                 </Row>
 105                 <p className="pt-5 text-center text-muted">{t('footer.contact')}</p>
 106                 <PrivacyDialog onHide={() => { setShowDialog(false); }} show={showDialog} />
 107         </footer>;
 108 };
 109
 110 export default Footer;