react-material-time-picker/src/components/modal/Modal.js

TimePicker is a user interface component that allows the user to easily select a specific time. It provides an analog clock interface that is easy to use and intuitive. TimePicker can be easily integrated into other user interface components, making it a

import './modal.scss'
import {useTheme} from "../../ThemeContext.js";
import React from "react";

function Modal( props ) {
    const [colors]=useTheme();
    const internalStyle = {
        background : colors.surface3,
        zIndex:`${ props.zIndex+1 || 1002}`,
        color : colors.onSurface,
        width: props.width+'px',
        top:(props.top || '10%'),
        fontFamily: 'Roboto,-apple-system, Ubuntu, sans-serif',
    }
    return (
        props.show ? (
            <div className='modal-component'>
                <div
                    className='scrim'
                    onClick={ props.hide }
                    style={{ zIndex:`${ props.zIndex || 1001}`,
                            backgroundColor:`${colors.scrim}`
                    }}

                />
                <div id='modal-container'
                     style={{...internalStyle,...props.style}}
                >
                    { props.children }

                </div>
            </div>
        ) : (
         ''
        )
    );
}
export { Modal };