UNPKG

saagie-ui

Version:

Saagie UI from Saagie Design System

51 lines (45 loc) 1.04 kB
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;