create EmptyState

2020-09-29 10:55:45 +02:00
parent 178d471fdc
commit 15da130211
2 changed files with 79 additions and 0 deletions
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { makeStyles, Typography, Grid } from '@material-ui/core';
+import { EmptyStateImage } from './EmptyStateImage';
+import Background from './assets/Background.svg';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(10, 0, 0, 0),
+  },
+  action: {
+    marginTop: theme.spacing(2),
+  },
+  imgPlacholder: {
+    position: 'relative',
+  },
+  backgroundImage: {
+    position: 'absolute',
+    width: '100%',
+  },
+}));
+
+type Props = {
+  title: string;
+  description?: string;
+  type: 'missingAnnotation' | 'noInformation' | 'createComponent' | 'noBuild';
+  action?: JSX.Element;
+};
+
+export const EmptyState = ({ title, description, type, action }: Props) => {
+  const classes = useStyles();
+  return (
+    <Grid
+      container
+      direction="row"
+      justify="space-around"
+      alignItems="flex-start"
+      className={classes.root}
+      spacing={2}
+    >
+      <Grid item container direction="column" xs={12} md={6}>
+        <Grid item>
+          <Typography variant="h3">{title}</Typography>
+        </Grid>
+        <Grid item>
+          <Typography variant="body1">{description}</Typography>
+        </Grid>
+        <Grid item className={classes.action}>
+          {action}
+        </Grid>
+      </Grid>
+      <Grid item xs={12} md={6} className={classes.imgPlacholder}>
+        <img
+          src={Background}
+          className={classes.backgroundImage}
+          alt="background"
+        />
+        <EmptyStateImage type={type} />
+      </Grid>
+    </Grid>
+  );
+};
@@ -34,3 +34,4 @@ export * from './Table';
 export * from './Tabs';
 export * from './TrendLine';
 export * from './WarningPanel';
+export * from './EmptyState';