jobiqo-cl/lib/es/src/components/03-molecules/02-empty/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import React__default from 'react';
import styled from 'styled-components';
import AlignedCenter from '../../02-atoms/06-layout/01-alignment/01-align-center/index.js';

/**
 * @file index.tsx
 *
 * @fileoverview Renders and empty element. Normally insde of a box.
 */
const EmptyELementWrapper = styled.div `
  max-width: ${props => props.theme.emptyElement.maxWidth};
  text-align: center;
  margin: auto;
  padding: ${props => props.theme.emptyElement.padding};
  color: ${props => props.theme.emptyElement.textColor};
`;
const StyledIconWrap = styled.div `
  svg {
    min-height: 100px;
    width: auto;
    color: ${props => props.iconColor
    ? props.iconColor
    : props.theme
        ? props.theme.emptyElement.iconColor
        : 'gray2'};
    ${props => (props.iconWidth ? `height: ${props.iconWidth}` : ``)}
    ${props => (props.iconHeight ? `height: ${props.iconHeight}` : ``)}
  }
`;
/**
 * An empty element can be used to show any kind of empty state. Eithe for
 * resumes / companies but also empty dashboard states or other empty states of any kind.
 */
const EmptyElement = ({ children, icon, iconColor, iconWidth, iconHeight }) => {
    return (React__default.createElement(EmptyELementWrapper, null,
        React__default.createElement(AlignedCenter, null,
            React__default.createElement(StyledIconWrap, { iconColor: iconColor, iconWidth: iconWidth, iconHeight: iconHeight }, icon),
            children)));
};

export { EmptyElement };