]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/PngDialog.js
compact keysanity tracker
[alttp.git] / resources / js / components / common / PngDialog.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Modal } from 'react-bootstrap';
4
5 import Loading from './Loading';
6
7 const PngPlayer = React.lazy(() => import('./PngPlayer'));
8
9 const PngDialog = ({ onHide, show, src, title }) => <Modal onHide={onHide} show={show} size="lg">
10         {title ?
11                 <Modal.Header closeButton>
12                         <Modal.Title>
13                                 {title}
14                         </Modal.Title>
15                 </Modal.Header>
16         : null}
17         <Modal.Body>
18                 <React.Suspense fallback={<Loading />}>
19                         <PngPlayer src={src} />
20                 </React.Suspense>
21         </Modal.Body>
22 </Modal>;
23
24 PngDialog.propTypes = {
25         onHide: PropTypes.func,
26         show: PropTypes.bool,
27         src: PropTypes.string,
28         title: PropTypes.string,
29 };
30
31 export default PngDialog;