overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls.jsx
Jakob Ackermann 9daa8f5d98 Merge pull request #15040 from overleaf/jpa-js-to-jsx
[web] rename all the JSX files to .jsx/.tsx

GitOrigin-RevId: 82056ae47e017523722cf258dcc83c8a925a28f7
2023-09-29 08:04:29 +00:00

56 lines
1.5 KiB
JavaScript

import { ButtonGroup } from 'react-bootstrap'
import PropTypes from 'prop-types'
import Button from 'react-bootstrap/lib/Button'
import Icon from '../../../shared/components/icon'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
function PdfViewerControls({ setZoom }) {
const { t } = useTranslation()
return (
<ButtonGroup>
<Button
aria-label={t('fit_to_width')}
bsSize="large"
bsStyle={null}
className="btn-secondary-info btn-secondary"
onClick={() => setZoom('fit-width')}
>
<Icon type="arrows-h" />
</Button>
<Button
aria-label={t('fit_to_height')}
bsSize="large"
bsStyle={null}
className="btn-secondary-info btn-secondary"
onClick={() => setZoom('fit-height')}
>
<Icon type="arrows-v" />
</Button>
<Button
aria-label={t('zoom_in')}
bsSize="large"
bsStyle={null}
className="btn-secondary-info btn-secondary"
onClick={() => setZoom('zoom-in')}
>
<Icon type="search-plus" />
</Button>
<Button
aria-label={t('zoom_out')}
bsSize="large"
bsStyle={null}
className="btn-secondary-info btn-secondary"
onClick={() => setZoom('zoom-out')}
>
<Icon type="search-minus" />
</Button>
</ButtonGroup>
)
}
PdfViewerControls.propTypes = {
setZoom: PropTypes.func.isRequired,
}
export default memo(PdfViewerControls)