@findify/react-components/lib/layouts/ZeroResults/index.js

Findify react UI components

/**
 * @module layouts/ZeroResults
 */
import { useEffect } from 'react';
import Grid from "../../components/common/Grid";
import Text from "../../components/Text";
import MapArray from "../../components/common/MapArray";
import ProductCard from "../../components/Cards/Product";
import useTranslations from "../../helpers/useTranslations";
import { useItems } from '@findify/react-connect';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var styles = {
  "container": "findify-layouts--zero-results__container",
  "wrapper": "findify-layouts--zero-results__wrapper",
  "sorry-container": "findify-layouts--zero-results__sorry-container",
  "sorry": "findify-layouts--zero-results__sorry",
  "suggestions-container": "findify-layouts--zero-results__suggestions-container",
  "possible-suggestions": "findify-layouts--zero-results__possible-suggestions",
  "recommendation": "findify-layouts--zero-results__recommendation",
  "recommendation-container": "findify-layouts--zero-results__recommendation-container",
  "sorryContainer": "findify-layouts--zero-results__sorry-container",
  "suggestionsContainer": "findify-layouts--zero-results__suggestions-container",
  "possibleSuggestions": "findify-layouts--zero-results__possible-suggestions",
  "recommendationContainer": "findify-layouts--zero-results__recommendation-container"
};
export default (function (_ref) {
  var q = _ref.q,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme;

  var _useItems = useItems(),
      items = _useItems.items,
      config = _useItems.config;

  var translate = useTranslations();
  useEffect(function () {
    var spinner = document.querySelector('.findify-component-spinner');

    if (spinner && !spinner.hidden) {
      spinner.hidden = true;
    }
  }, []);
  return /*#__PURE__*/_jsxs("div", {
    className: theme.container,
    children: [/*#__PURE__*/_jsxs("div", {
      className: theme.wrapper,
      children: [/*#__PURE__*/_jsx("div", {
        className: theme.sorryContainer,
        children: /*#__PURE__*/_jsx(Text, {
          style: {
            marginTop: 20
          },
          primary: true,
          html: translate(q ? 'zeroresults.noResultsFound' : 'zeroresults.noResultEmptyQuery', escape(q))
        })
      }), /*#__PURE__*/_jsx("div", {
        className: theme.recommendationContainer,
        children: /*#__PURE__*/_jsx(Text, {
          className: theme.recommendation,
          primary: true,
          inlineBlock: true,
          children: translate('zeroresults.checkOutPopularProducts')
        })
      })]
    }), /*#__PURE__*/_jsx(Grid, {
      role: "main",
      wrapperComponent: "ul",
      columnComponent: "li",
      gutter: 12,
      columns: config.getIn(['breakpoints', 'grid']),
      children: MapArray({
        array: items,
        factory: ProductCard,
        config: config.get('product')
      })
    })]
  });
});