@shopify/polaris/dist/esm/components/EmptySearchResult/EmptySearchResult.js

Shopify’s product component library

import React$1 from 'react';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { Image as Image$1 } from '../Image/Image.js';
import { TextStyle as TextStyle$1 } from '../TextStyle/TextStyle.js';
import { Stack as Stack$1 } from '../Stack/Stack.js';
import { DisplayText as DisplayText$1 } from '../DisplayText/DisplayText.js';
import img from './illustrations/empty-search.svg.js';

function EmptySearchResult({
  title,
  description,
  withIllustration
}) {
  var i18n = useI18n();
  var altText = i18n.translate('Polaris.EmptySearchResult.altText');
  var descriptionMarkup = description ? /*#__PURE__*/React$1.createElement("p", null, description) : null;
  var illustrationMarkup = withIllustration ? /*#__PURE__*/React$1.createElement(Image$1, {
    alt: altText,
    source: img,
    draggable: false
  }) : null;
  return /*#__PURE__*/React$1.createElement(Stack$1, {
    alignment: "center",
    vertical: true
  }, illustrationMarkup, /*#__PURE__*/React$1.createElement(DisplayText$1, {
    size: "small"
  }, title), /*#__PURE__*/React$1.createElement(TextStyle$1, {
    variation: "subdued"
  }, descriptionMarkup));
}

export { EmptySearchResult };