resources/js/components/pages/Map.js

   1 import React from 'react';
   2 import { Container } from 'react-bootstrap';
   3 import { useTranslation } from 'react-i18next';
   4
   5 import Buttons from '../map/Buttons';
   6 import List from '../map/List';
   7 import OpenSeadragon from '../map/OpenSeadragon';
   8 import Pins from '../map/Pins';
   9
  10 const Map = () => {
  11         const container = React.useRef();
  12         const { t } = useTranslation();
  13
  14         React.useEffect(() => {
  15                 window.document.title = t('map.heading');
  16         }, []);
  17
  18         return <Container fluid>
  19                 <OpenSeadragon ref={container}>
  20                         <div className="d-flex align-items-center justify-content-between">
  21                                 <h1>{t('map.heading')}</h1>
  22                                 <Buttons />
  23                         </div>
  24                         <div ref={container} style={{ height: '80vh' }} />
  25                         <Pins />
  26                         <List />
  27                 </OpenSeadragon>
  28         </Container>;
  29 };
  30
  31 export default Map;