add plain maps

[alttp.git] / resources / js / components / pages / Map.js

diff --git a/resources/js/components/pages/Map.js b/resources/js/components/pages/Map.js
new file mode 100644 (file)
index 0000000..50a28fb
--- /dev/null
+++ b/resources/js/components/pages/Map.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Buttons from '../map/Buttons';
+import OpenSeadragon from '../map/OpenSeadragon';
+
+const Map = () => {
+       const container = React.useRef();
+       const { t } = useTranslation();
+
+       return <Container fluid>
+               <OpenSeadragon ref={container}>
+                       <div className="d-flex align-items-center justify-content-between">
+                               <h1>{t('map.heading')}</h1>
+                               <Buttons />
+                       </div>
+                       <div ref={container} style={{ height: '80vh' }} />
+               </OpenSeadragon>
+       </Container>;
+};
+
+export default Map;