Add reusable <Modal> component, use with <Alert>

This commit is contained in:
Evan Hahn 2021-04-13 09:20:02 -05:00 committed by GitHub
parent 9846fb8edf
commit 62f1a42c25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 276 additions and 55 deletions

View file

@ -5,7 +5,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
import { LocalizerType } from '../types/Util';
import { Button } from './Button';
import { ModalHost } from './ModalHost';
import { Modal } from './Modal';
type PropsType = {
title?: string;
@ -20,13 +20,10 @@ export const Alert: FunctionComponent<PropsType> = ({
onClose,
title,
}) => (
<ModalHost onClose={onClose}>
<div className="module-Alert">
{title && <h1 className="module-Alert__title">{title}</h1>}
<p className="module-Alert__body">{body}</p>
<div className="module-Alert__button-container">
<Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
</div>
</div>
</ModalHost>
<Modal i18n={i18n} onClose={onClose} title={title}>
{body}
<Modal.Footer>
<Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
</Modal.Footer>
</Modal>
);