feature: add button to open cheatsheet in a new tab

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-27 14:56:50 +02:00
parent 438a5466e0
commit 9b9eafc948
7 changed files with 108 additions and 39 deletions

View file

@ -6,10 +6,10 @@
import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
import { cypressId } from '../../../../utils/cypress-attribute'
import { CommonModal } from '../../../common/modals/common-modal'
import { CheatsheetModalBody } from './cheatsheet-modal-body'
import { CheatsheetContent } from './cheatsheet-content'
import { CheatsheetInNewTabButton } from './cheatsheet-in-new-tab-button'
import React, { Fragment } from 'react'
import { Button } from 'react-bootstrap'
import { QuestionCircle as IconQuestionCircle } from 'react-bootstrap-icons'
import { Button, Modal } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -32,12 +32,18 @@ export const CheatsheetButton: React.FC = () => {
</Button>
<CommonModal
modalSize={'xl'}
titleIcon={IconQuestionCircle}
show={modalVisibility}
onHide={closeModal}
showCloseButton={true}
titleI18nKey={'cheatsheet.modal.title'}>
<CheatsheetModalBody />
titleI18nKey={'cheatsheet.modal.title'}
additionalTitleElement={
<div className={'d-flex flex-row-reverse w-100 mx-2'}>
<CheatsheetInNewTabButton onClick={closeModal} />
</div>
}>
<Modal.Body>
<CheatsheetContent />
</Modal.Body>
</CommonModal>
</Fragment>
)