From a283d4310c11f03fe9ff889c6274798b70cf6a19 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Wed, 7 Oct 2020 23:51:45 +0300
Subject: feat: create ModalScreen component

---
 src/components/ModalScreen/ModalScreen.tsx | 39 ++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/ModalScreen/ModalScreen.tsx

(limited to 'src/components')

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
new file mode 100644
index 0000000..6b7c52c
--- /dev/null
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  Dialog,
+  Toolbar,
+  Typography,
+  IconButton,
+  useMediaQuery,
+  useTheme
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+interface PropTypes {
+  title: string;
+}
+
+const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const history = useHistory();
+
+  const handleClose = useCallback(() => history.goBack(), [history]);
+
+  return (
+    <Dialog fullScreen={isMobile} fullWidth open>
+      <Toolbar color="primary">
+        <IconButton edge="start" onClick={handleClose}>
+          <CloseIcon />
+        </IconButton>
+        <Typography variant="h6">
+          { title }
+        </Typography>
+      </Toolbar>
+      { children }
+    </Dialog>
+  );
+};
+
+export default ModalScreen;
-- 
cgit v1.2.3