]> git.localhorst.tv Git - alttp.git/blob - resources/js/pages/Map.js
chat bot config
[alttp.git] / resources / js / pages / Map.js
1 import React from 'react';
2 import { Container } from 'react-bootstrap';
3 import { Helmet } from 'react-helmet';
4 import { useTranslation } from 'react-i18next';
5 import { useParams } from 'react-router';
6
7 import CanonicalLinks from '../components/common/CanonicalLinks';
8 import Buttons from '../components/map/Buttons';
9 import List from '../components/map/List';
10 import OpenSeadragon from '../components/map/OpenSeadragon';
11 import Pins from '../components/map/Pins';
12 import UWSuperTiles from '../components/map/UWSuperTiles';
13
14 export const Component = () => {
15         const [uwOverlay, setUWOverlay] = React.useState(false);
16
17         const { activeMap } = useParams();
18         const container = React.useRef();
19         const { t } = useTranslation();
20
21         return <Container fluid>
22                 <Helmet>
23                         <title>{t('map.heading')} - {t(`map.${activeMap}Long`)}</title>
24                         <meta name="description" content={t('map.description')} />
25                 </Helmet>
26                 <CanonicalLinks base={`/map/${activeMap}`} />
27                 <OpenSeadragon ref={container}>
28                         <div className="d-flex align-items-start justify-content-between">
29                                 <h1>{t('map.heading')} - {t(`map.${activeMap}Long`)}</h1>
30                                 <Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
31                         </div>
32                         <div ref={container} style={{ height: '80vh' }} />
33                         <Pins />
34                         <UWSuperTiles show={uwOverlay} />
35                         <List />
36                 </OpenSeadragon>
37         </Container>;
38 };