resources/js/components/app/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                                                                 {t('footer.tech')}
  50                                                         </Nav.Link>
  51                                                 </LinkContainer>
  52                                         </Nav.Item>
  53                                         <Nav.Item as="li">
  54                                                 <LinkContainer to="/map">
  55                                                         <Nav.Link className="p-0 text-muted" href="/map">
  56                                                                 {t('footer.map')}
  57                                                         </Nav.Link>
  58                                                 </LinkContainer>
  59                                         </Nav.Item>
  60                                         <Nav.Item as="li">
  61                                                 <Nav.Link
  62                                                         className="p-0 text-muted"
  63                                                         href="https://glitchmaps.mfns.dev/"
  64                                                         target="_blank"
  65                                                 >
  66                                                         {t('footer.muffins')}
  67                                                 </Nav.Link>
  68                                         </Nav.Item>
  69                                         <Nav.Item as="li">
  70                                                 <Nav.Link
  71                                                         className="p-0 text-muted"
  72                                                         href="https://wiki.supermetroid.run/"
  73                                                         target="_blank"
  74                                                 >
  75                                                         {t('footer.smwiki')}
  76                                                 </Nav.Link>
  77                                         </Nav.Item>
  78                                 </Nav>
  79                         </Col>
  80                         <Col md={4}>
  81                                 <h5>{t('footer.info')}</h5>
  82                                 <Nav as="ul" className="flex-column">
  83                                         <Nav.Item as="li">
  84                                                 <Nav.Link
  85                                                         className="p-0 text-muted"
  86                                                         onClick={() => { setShowDialog(true); }}
  87                                                 >
  88                                                         {t('footer.privacy')}
  89                                                 </Nav.Link>
  90                                         </Nav.Item>
  91                                         <Nav.Item as="li">
  92                                                 <Nav.Link
  93                                                         className="p-0 text-muted"
  94                                                         href="https://discord.gg/5zuANcS"
  95                                                         target="_blank"
  96                                                 >
  97                                                         {t('footer.alttpde')}
  98                                                 </Nav.Link>
  99                                         </Nav.Item>
 100                                         <Nav.Item as="li">
 101                                                 <Nav.Link
 102                                                         className="p-0 text-muted"
 103                                                         href="https://discord.com/invite/GGdrbnQmVs"
 104                                                         target="_blank"
 105                                                 >
 106                                                         {t('footer.smd')}
 107                                                 </Nav.Link>
 108                                         </Nav.Item>
 109                                         <Nav.Item as="li">
 110                                                 <Nav.Link
 111                                                         className="p-0 text-muted"
 112                                                         href="https://discord.gg/hVw5Zeq"
 113                                                         target="_blank"
 114                                                 >
 115                                                         {t('footer.connect')}
 116                                                 </Nav.Link>
 117                                         </Nav.Item>
 118                                 </Nav>
 119                         </Col>
 120                 </Row>
 121                 <p className="pt-5 text-center text-muted">{t('footer.contact')}</p>
 122                 <PrivacyDialog onHide={() => { setShowDialog(false); }} show={showDialog} />
 123         </footer>;
 124 };
 125
 126 export default Footer;