overleaf/services/web/frontend/js/features/token-access/components/leave-project-modal.tsx
roo hutton 2bed549195 Merge pull request #19235 from overleaf/rh-link-sharing-leave-modal
[web] Confirmation modal when leaving project on sharing updates screen

GitOrigin-RevId: a19201f5157c2e92f98480bc59ad1f405601945d
2024-07-18 08:04:31 +00:00

53 lines
1.3 KiB
TypeScript

import OLButton from '@/features/ui/components/ol/ol-button'
import OLModal, {
OLModalBody,
OLModalFooter,
OLModalHeader,
} from '@/features/ui/components/ol/ol-modal'
import Notification from '@/shared/components/notification'
import { Modal } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
type LeaveProjectModalProps = {
showModal: boolean
handleCloseModal: () => void
handleLeaveAction: () => void
}
function LeaveProjectModal({
showModal,
handleCloseModal,
handleLeaveAction,
}: LeaveProjectModalProps) {
const { t } = useTranslation()
return (
<OLModal
animation
show={showModal}
onHide={handleCloseModal}
id="action-project-modal"
backdrop="static"
>
<OLModalHeader closeButton>
<Modal.Title>{t('leave_project')}</Modal.Title>
</OLModalHeader>
<OLModalBody>
<p>{t('about_to_leave_project')}</p>
<Notification
content={t('this_action_cannot_be_undone')}
type="warning"
/>
</OLModalBody>
<OLModalFooter>
<OLButton variant="secondary" onClick={handleCloseModal}>
{t('cancel')}
</OLButton>
<OLButton variant="danger" onClick={() => handleLeaveAction()}>
{t('confirm')}
</OLButton>
</OLModalFooter>
</OLModal>
)
}
export default LeaveProjectModal