saagie-ui
Version:
Saagie UI from Saagie Design System
51 lines (45 loc) • 1.04 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
title: PropTypes.node,
children: PropTypes.node,
image: PropTypes.node,
tag: PropTypes.elementType,
};
const defaultProps = {
title: 'No items',
children: '',
image: '',
tag: 'div',
};
export const PageEmptyState = (({
title,
children,
image,
tag: Tag,
}) => {
const IllustrationRender = () => (
<>
{
image
? <div className="sui-l-page-empty-state__illustration" style={{ backgroundImage: `url(${image})` }} />
: <div className="sui-l-page-empty-state__illustration" />
}
</>
);
return (
<Tag className="sui-l-page-empty-state">
<div className="sui-l-page-empty-state__inner">
<div className="sui-l-page-empty-state__content">
<h2>
{title}
</h2>
{children}
</div>
<IllustrationRender />
</div>
</Tag>
);
});
PageEmptyState.propTypes = propTypes;
PageEmptyState.defaultProps = defaultProps;