Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 4x 4x 6x 6x | import React, { FC } from 'react';
import { Button, ButtonClasses, KsHeaderLogo } from 'ag-ems-ui-library';
const styles = require('./InfoModal.module.css')
import baseLogoSrc from '../../../images/klarschiff-logo.svg';
import logoSrc from '../../../images/ag-ems-logo.svg';
import infoImageSrc from '../../../images/info-image-temp.png';
import { useTranslation } from 'react-i18next';
import { Modal } from '../../Modal';
export const InfoModal: FC<{
isOpen: boolean;
onClose: () => void
}> = ({
isOpen = false,
onClose
}) => {
const { t } = useTranslation();
return (
<Modal
isOpen={isOpen}
onClose={onClose}
header={
<KsHeaderLogo
baseLogo={{ src: baseLogoSrc, alt: 'Klarschiff.de Logo' }}
// logo={{ src: logoSrc, alt: 'AG EMS Logo' }}
/>
}
overlayClose={false}
>
<div className={styles.InfoModal}>
<div className={`${styles.InfoModalImage} center`}>
<img src={infoImageSrc} alt="Info" />
</div>
<div className="wrapper">
<h1 className={styles.InfoModalTitle}>
<span className="green">{t('infoModal.prefix')}</span> {t('infoModal.title')}
</h1>
<div className={styles.InfoModalDescription}>
<p>{t('infoModal.description')}</p>
<p><strong>{t('infoModal.important')}</strong></p>
</div>
<a
className={`${styles.InfoModalButton} ${ButtonClasses.ghost} ${ButtonClasses.lg} ${ButtonClasses.fullWidth}`}
href={'#'}>{t('moreInfo')}</a>
</div>
</div>
<div className={`${styles.InfoModalFooter} wrapper`}>
<Button
value={t('close')}
sizing="lg"
variant="ks-primary"
fullWidth={true}
onClick={onClose}
/>
</div>
</Modal>
);
}; |