resources/js/components/map/Buttons.js

   1 import React from 'react';
   2 import { Button } from 'react-bootstrap';
   3 import { useTranslation } from 'react-i18next';
   4
   5 import { useOpenSeadragon } from './OpenSeadragon';
   6
   7 const Buttons = () => {
   8         const { activeMap, setActiveMap } = useOpenSeadragon();
   9         const { t } = useTranslation();
  10
  11         return <div className="button-bar">
  12                 {['lw', 'dw', 'sp', 'uw'].map(map =>
  13                         <Button
  14                                 active={activeMap === map}
  15                                 key={map}
  16                                 onClick={() => setActiveMap(map)}
  17                                 title={t(`map.${map}Long`)}
  18                                 variant="outline-secondary"
  19                         >
  20                                 {t(`map.${map}Short`)}
  21                         </Button>
  22                 )}
  23         </div>;
  24 };
  25
  26 export default Buttons;