aboutsummaryrefslogtreecommitdiff
path: root/src/lib/components/Window/Window.tsx
diff options
context:
space:
mode:
authorEugene Sokolov <eug-vs@keemail.me>2020-02-03 13:30:27 +0000
committerGitHub <noreply@github.com>2020-02-03 13:30:27 +0000
commit989173ea6e39ac27893f3cc5efba043ebda9df67 (patch)
tree4281d872404091155d1ddeaa5727bc5fb51fdd8a /src/lib/components/Window/Window.tsx
parent53143dfc36e66e285256706a8ec837e2bd2f8427 (diff)
parent5bcc9b41e59bf7215abf395ea899cdbc2d06db9a (diff)
downloadreact-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.tsx61
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;