overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-toolbar-button.tsx
David a70a3fc77e Merge pull request #18514 from overleaf/dp-pdf-toolbar-hover
Add hover state to pdf toolbar buttons

GitOrigin-RevId: d58ad739e6454b9e0cdbdbb93c55e58785a9d672
2024-06-03 08:04:02 +00:00

45 lines
946 B
TypeScript

import Button from 'react-bootstrap/lib/Button'
import MaterialIcon from '@/shared/components/material-icon'
import Tooltip from '@/shared/components/tooltip'
type PDFToolbarButtonProps = {
tooltipId: string
icon: string
label: string
onClick: () => void
shortcut?: string
disabled?: boolean
}
export default function PDFToolbarButton({
tooltipId,
disabled,
label,
icon,
onClick,
shortcut,
}: PDFToolbarButtonProps) {
return (
<Tooltip
id={tooltipId}
description={
<>
<div>{label}</div>
{shortcut && <div>{shortcut}</div>}
</>
}
overlayProps={{ placement: 'bottom' }}
>
<Button
aria-label={label}
bsSize="large"
bsStyle={null}
className="pdf-toolbar-btn pdfjs-toolbar-button"
disabled={disabled}
onClick={onClick}
>
<MaterialIcon type={icon} />
</Button>
</Tooltip>
)
}