+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core/styles';
+import { ArvadosTheme } from 'src/common/custom-theme';
+import IconBase from '../icon/icon';
+
+export interface EmptyStateDataProps {
+ message: string;
+ icon: string;
+ details?: string;
+}
+
+type EmptyStateProps = EmptyStateDataProps & WithStyles<CssRules>;
+
+class EmptyState extends React.Component<EmptyStateProps, {}> {
+
+ render() {
+ const { classes, message, details, icon, children } = this.props;
+ return (
+ <Typography className={classes.container} component="div">
+ <IconBase icon={icon} className={classes.icon} />
+ <Typography variant="body1" gutterBottom>{message}</Typography>
+ { details && <Typography gutterBottom>{details}</Typography> }
+ { children && <Typography gutterBottom>{children}</Typography> }
+ </Typography>
+ );
+ }
+
+}
+
+type CssRules = 'container' | 'icon';
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ container: {
+ textAlign: 'center'
+ },
+ icon: {
+ color: theme.palette.grey["500"],
+ fontSize: '72px'
+ }
+});
+
+export default withStyles(styles)(EmptyState);
\ No newline at end of file