const base = { 'z-index' : 99 , 'justify-content' : 'center' , display : 'flex' , width : '100%' , height : '100%' , } ; const normal = { ... base , 'align-items' : 'flex-start' } ; const right = { ... base , 'align-items' : 'stretch' , 'justify-content' : 'flex-end' , } ; const dialog = { background : 'var(--background-30)' , 'margin-top' : '15%' , 'flex-flow' : 'column' , } ; type PluginProps = { visible : boolean ; extraStyle ? : any ; children ? : any ; id ? : string ; } ; export const Plugin = ( { id , visible , extraStyle , children } ) => ( < div id = { id } style = { normal as CSSProperties } > < div style = { { ... dialog , ... extraStyle , width : '600px' , display : visible ? 'flex' : 'none' , } } > { children } < /div> < /div>); export const PluginRight = ( { visible , id , extraStyle , children , } ) => ( < div id = { id } style = { right as CSSProperties } > < div style = { { ... dialog , width : '500px' , height : '100%' , background : 'var(--background-40)' , display : visible ? 'flex' : 'none' , 'flex-flow' : 'column' , 'margin-top' : 0 , ... extraStyle , } } > { children } < /div> < /div>);