diff options
author | Eugene Sokolov <eug-vs@keemail.me> | 2020-02-03 13:30:27 +0000 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-02-03 13:30:27 +0000 |
commit | 989173ea6e39ac27893f3cc5efba043ebda9df67 (patch) | |
tree | 4281d872404091155d1ddeaa5727bc5fb51fdd8a /src/lib/components/Window/Window.tsx | |
parent | 53143dfc36e66e285256706a8ec837e2bd2f8427 (diff) | |
parent | 5bcc9b41e59bf7215abf395ea899cdbc2d06db9a (diff) | |
download | react-benzin-989173ea6e39ac27893f3cc5efba043ebda9df67.tar.gz |
Merge pull request #2 from eug-vs/typescript
Add Typescript support
Diffstat (limited to 'src/lib/components/Window/Window.tsx')
-rw-r--r-- | src/lib/components/Window/Window.tsx | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/src/lib/components/Window/Window.tsx b/src/lib/components/Window/Window.tsx new file mode 100644 index 0000000..ea8e264 --- /dev/null +++ b/src/lib/components/Window/Window.tsx @@ -0,0 +1,61 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +import WindowSurface from './WindowSurface'; +import { SurfaceSize, SurfacePosition } from './types'; + + +interface PropTypes { + type: 'primary' | 'secondary' | 'mono'; + name?: string; +} + + +const useStyles = makeStyles((theme: any) => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation2, + }, +})); + + +const Window: React.FC<PropTypes> = ({ type, name, children }) => { + const classes = useStyles(); + + const size: SurfaceSize = { + height: '85vh', + }; + + const position: SurfacePosition = { + 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; |