saagie-ui/src/react/core/molecules/searchEmptyState/SearchEmptyState.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import { EmptyState } from '../emptyState/EmptyState';

const propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  entity: PropTypes.node,
  searchTerm: PropTypes.node,
  /**
   * Use this to replace the full sentence with your own words.
   * (e.g. ({ entity, searchTerm }) => `Can't found the "${searchTerm}" ${entity}`)
   */
  formatSentence: PropTypes.func,
};

const defaultProps = {
  children: '',
  className: '',
  entity: 'item',
  searchTerm: '',
  formatSentence: null,
};

export const SearchEmptyState = ({
  children,
  className,
  entity,
  searchTerm,
  formatSentence,
}) => (
  <>
    <EmptyState
      className={className}
      icon="search"
      content={(
        formatSentence
          ? formatSentence({ entity, searchTerm })
          : (
            <>
                No
              {' '}
              {entity}
              {' '}
              {(searchTerm || searchTerm === 0) && (
                <strong>
                    &quot;
                  {searchTerm}
                    &quot;
                </strong>
              )}
              {' '}
                found
            </>
          )
      )}
    >
      {children}
    </EmptyState>
  </>
);

SearchEmptyState.propTypes = propTypes;
SearchEmptyState.defaultProps = defaultProps;