overleaf/services/web/frontend/js/features/review-panel-new/components/review-panel-more-comments-button.tsx
ilkin-overleaf 8bc374c916 Merge pull request #21115 from overleaf/ii-bs5-review-panel
[web] BS5 review panel new

GitOrigin-RevId: c65d17d0053858bd74984ba746a620b89d900606
2024-10-21 08:04:37 +00:00

37 lines
1 KiB
TypeScript

import { FC, memo } from 'react'
import MaterialIcon from '@/shared/components/material-icon'
import classNames from 'classnames'
import { useTranslation } from 'react-i18next'
import OLButton from '@/features/ui/components/ol/ol-button'
import { bsVersion } from '@/features/utils/bootstrap-5'
const MoreCommentsButton: FC<{
onClick: () => void
direction: 'upward' | 'downward'
}> = ({ onClick, direction }) => {
const { t } = useTranslation()
return (
<div
className={classNames('review-panel-more-comments-button-container', {
downwards: direction === 'downward',
upwards: direction === 'upward',
})}
>
<OLButton
variant="secondary"
size="sm"
className={bsVersion({ bs3: 'review-panel-more-comments-button' })}
onClick={onClick}
bs3Props={{
bsSize: 'xsmall',
}}
>
<MaterialIcon type={`arrow_${direction}_alt`} />
{t('more_comments')}
</OLButton>
</div>
)
}
export default memo(MoreCommentsButton)