]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/map/Buttons.js
tracker medallion controler
[alttp.git] / resources / js / components / map / Buttons.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Form } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
5
6 import { useOpenSeadragon } from './OpenSeadragon';
7
8 const Buttons = ({ setUWOverlay, uwOverlay }) => {
9         const { activeMap, setActiveMap } = useOpenSeadragon();
10         const { t } = useTranslation();
11
12         return <div className="mt-5">
13                 <div className="button-bar">
14                         {['lw', 'dw', 'sp', 'uw', 'uw2'].map(map =>
15                                 <Button
16                                         active={activeMap === map}
17                                         key={map}
18                                         onClick={() => setActiveMap(map)}
19                                         title={t(`map.${map}Long`)}
20                                         variant="outline-secondary"
21                                 >
22                                         {t(`map.${map}Short`)}
23                                 </Button>
24                         )}
25                 </div>
26                 {activeMap === 'uw' ?
27                         <div className="mt-2">
28                                 <Form.Check
29                                         checked={uwOverlay}
30                                         id="toggle-uw-overlay"
31                                         inline
32                                         onChange={e => setUWOverlay(e.target.checked)}
33                                         type="checkbox"
34                                 />
35                                 <Form.Label className="mt-0" htmlFor="toggle-uw-overlay">
36                                         {t('map.uwOverlay')}
37                                 </Form.Label>
38                         </div>
39                 : null}
40         </div>;
41 };
42
43 Buttons.propTypes = {
44         setUWOverlay: PropTypes.func,
45         uwOverlay: PropTypes.bool,
46 };
47
48 export default Buttons;