@eureca/eureca-ui/src/components/Table/table-empty-state.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { Box, Typography } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core/styles';

import { colors } from '../../theme/colors';

import { Flex } from '../Flex';

import { ReactComponent as NoTableDataImageSvg } from '../../assets/images/draw-empty-1.svg';

const theme = createMuiTheme();

const styles = {
  container: { width: '100%' },
  textContainer: { width: theme.spacing(30) },
  text: { color: colors.gray3 },
};

function TableEmptyState({ text }) {
  return (
    <Box pt={9} pb={6} w={1}>
      <Flex directionRow justifyCenter alignCenter style={styles.container}>
        <NoTableDataImageSvg />
        <Box pl={2} style={styles.textContainer}>
          <Typography variant="body1" style={styles.text}>
            {text}
          </Typography>
        </Box>
      </Flex>
    </Box>
  );
}

TableEmptyState.propTypes = {
  text: PropTypes.string.isRequired,
};

export default TableEmptyState;