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 { viewer } = useOpenSeadragon();
   9         const { t } = useTranslation();
  10
  11         const goToPage = React.useCallback((p) => {
  12                 if (viewer) viewer.goToPage(p);
  13         }, [viewer]);
  14
  15         return <div className="button-bar">
  16                 <Button
  17                         onClick={() => goToPage(0)}
  18                         title={t('map.lwLong')}
  19                         variant="outline-secondary"
  20                 >
  21                         {t('map.lwShort')}
  22                 </Button>
  23                 <Button
  24                         onClick={() => goToPage(1)}
  25                         title={t('map.dwLong')}
  26                         variant="outline-secondary"
  27                 >
  28                         {t('map.dwShort')}
  29                 </Button>
  30                 <Button
  31                         onClick={() => goToPage(2)}
  32                         title={t('map.spLong')}
  33                         variant="outline-secondary"
  34                 >
  35                         {t('map.spShort')}
  36                 </Button>
  37                 <Button
  38                         onClick={() => goToPage(3)}
  39                         title={t('map.uwLong')}
  40                         variant="outline-secondary"
  41                 >
  42                         {t('map.uwShort')}
  43                 </Button>
  44         </div>;
  45 };
  46
  47 export default Buttons;