diff options
author | Anton Dubik <anton.dubik33@gmail.com> | 2020-01-28 22:09:49 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-01-28 22:09:49 +0300 |
commit | d246305bfa280221efa8ee31cf6a841fbf54f378 (patch) | |
tree | 2029301838a09c072a8e4caaa3e6dc6e7a0c1a15 /src/lib/components/Window/Window.js | |
parent | 51326e543f5f7d468d30e46288e91ef98d77a9d8 (diff) | |
parent | 53143dfc36e66e285256706a8ec837e2bd2f8427 (diff) | |
download | react-benzin-1.0.1.tar.gz |
Merge pull request #1 from Eug-VS/developv1.0.1
BENZIN Release 1.0.1
Diffstat (limited to 'src/lib/components/Window/Window.js')
-rw-r--r-- | src/lib/components/Window/Window.js | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/src/lib/components/Window/Window.js b/src/lib/components/Window/Window.js new file mode 100644 index 0000000..027213f --- /dev/null +++ b/src/lib/components/Window/Window.js @@ -0,0 +1,55 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +import WindowSurface from './WindowSurface/WindowSurface'; + + +const useStyles = makeStyles(theme => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation2, + }, +})); + + +const Window = ({ type, name, children }) => { + const classes = useStyles(); + + const size = { + height: '85vh', + }; + + const position = { + bottom: '3vh', + }; + + if (type === 'primary') { + size.width = '63vw'; + position.left = '2vw'; + } else if (type === 'secondary') { + size.width = '31vw'; + position.right = '2vw'; + } else if (type === 'mono') { + position.left = '2vw'; + position.right = '2vw'; + } + + return ( + <WindowSurface + size={size} + position={position} + > + {name && + <div> + <Typography variant="h5" className={classes.header}>{name}</Typography> + <Divider /> + </div> + } + {children} + </WindowSurface> + ); +}; + + +export default Window; |