From 917d83bfb70d863944df62fb3ca254ba74e67e6e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 04:09:56 +0300
Subject: feat: add EmptyState component

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

(limited to 'src/components')

diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
new file mode 100644
index 0000000..b103e3c
--- /dev/null
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import noContentIcon from '../../assets/noContent.svg';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  img: {
+    margin: theme.spacing(2),
+    width: theme.spacing(24)
+  }
+
+}));
+
+const EmptyState: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <img src={noContentIcon} className={classes.img} alt="No content" />
+      <Typography variant="h5">
+        No content
+      </Typography>
+    </div>
+  );
+};
+
+export default EmptyState;
-- 
cgit v1.2.3


From c30f59c85d8c57a9250635d96e3a295345c45ba7 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 04:31:15 +0300
Subject: feat: add message to EmptyState

---
 src/components/EmptyState/EmptyState.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index b103e3c..f6a6363 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -3,6 +3,10 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import noContentIcon from '../../assets/noContent.svg';
 
+interface PropTypes {
+  message?: string;
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
@@ -17,7 +21,7 @@ const useStyles = makeStyles(theme => ({
 
 }));
 
-const EmptyState: React.FC = () => {
+const EmptyState: React.FC<PropTypes> = ({ message }) => {
   const classes = useStyles();
 
   return (
@@ -26,6 +30,11 @@ const EmptyState: React.FC = () => {
       <Typography variant="h5">
         No content
       </Typography>
+      <Typography color="textSecondary">
+        <p>
+          {message}
+        </p>
+      </Typography>
     </div>
   );
 };
-- 
cgit v1.2.3


From 1d35dd8a80f0ea72306e96c2229a27798ec75ce9 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 04:59:45 +0300
Subject: feat: use EmptyState variants

---
 src/components/EmptyState/EmptyState.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index f6a6363..214bb56 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -2,8 +2,11 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import noContentIcon from '../../assets/noContent.svg';
+import constructionIcon from '../../assets/construction.svg';
+
 
 interface PropTypes {
+  variant?: 'default' | 'construction';
   message?: string;
 }
 
@@ -21,14 +24,27 @@ const useStyles = makeStyles(theme => ({
 
 }));
 
-const EmptyState: React.FC<PropTypes> = ({ message }) => {
+const CONTEXT = {
+  default: {
+    icon: noContentIcon,
+    tagline: 'No content'
+  },
+  construction: {
+    icon: constructionIcon,
+    tagline: 'Coming soon'
+  }
+};
+
+const EmptyState: React.FC<PropTypes> = ({ variant = 'default', message }) => {
   const classes = useStyles();
 
+  const { icon, tagline } = CONTEXT[variant];
+
   return (
     <div className={classes.root}>
-      <img src={noContentIcon} className={classes.img} alt="No content" />
+      <img src={icon} className={classes.img} alt="No content" />
       <Typography variant="h5">
-        No content
+        {tagline}
       </Typography>
       <Typography color="textSecondary">
         <p>
-- 
cgit v1.2.3