overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-buttons.tsx
David 55e54ce875 Merge pull request #18435 from overleaf/dp-ae-pdf-viewer-controls
Update PDF viewer controls

GitOrigin-RevId: 4e15b7cbd34e878d0175be635369b8d620188203
2024-05-30 08:05:06 +00:00

37 lines
1,004 B
TypeScript

import { ButtonGroup } from 'react-bootstrap'
import PDFToolbarButton from './pdf-toolbar-button'
import { useTranslation } from 'react-i18next'
const isMac = /Mac/.test(window.navigator?.platform)
type PdfZoomButtonsProps = {
setZoom: (zoom: string) => void
}
function PdfZoomButtons({ setZoom }: PdfZoomButtonsProps) {
const { t } = useTranslation()
const zoomInShortcut = isMac ? '⌘+' : 'Ctrl++'
const zoomOutShortcut = isMac ? '⌘-' : 'Ctrl+-'
return (
<ButtonGroup className="pdfjs-toolbar-buttons">
<PDFToolbarButton
tooltipId="pdf-controls-zoom-out-tooltip"
label={t('zoom_out')}
icon="remove"
onClick={() => setZoom('zoom-out')}
shortcut={zoomOutShortcut}
/>
<PDFToolbarButton
tooltipId="pdf-controls-zoom-in-tooltip"
label={t('zoom_in')}
icon="add"
onClick={() => setZoom('zoom-in')}
shortcut={zoomInShortcut}
/>
</ButtonGroup>
)
}
export default PdfZoomButtons