]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/pages/Map.js
b27560261194512b99000b6ac389c23c349983a1
[alttp.git] / resources / js / components / 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
6 import Buttons from '../map/Buttons';
7 import List from '../map/List';
8 import OpenSeadragon from '../map/OpenSeadragon';
9 import Pins from '../map/Pins';
10 import UWSuperTiles from '../map/UWSuperTiles';
11
12 const Map = () => {
13         const [uwOverlay, setUWOverlay] = React.useState(false);
14
15         const container = React.useRef();
16         const { t } = useTranslation();
17
18         return <Container fluid>
19                 <Helmet>
20                         <title>{t('map.heading')}</title>
21                         <meta name="description" content={t('map.description')} />
22                 </Helmet>
23                 <OpenSeadragon ref={container}>
24                         <div className="d-flex align-items-start justify-content-between">
25                                 <h1>{t('map.heading')}</h1>
26                                 <Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />
27                         </div>
28                         <div ref={container} style={{ height: '80vh' }} />
29                         <Pins />
30                         <UWSuperTiles show={uwOverlay} />
31                         <List />
32                 </OpenSeadragon>
33         </Container>;
34 };
35
36 export default Map;