@findify/react-components/lib/components/Cards/Promo/index.js

Findify react UI components

/**
 * @module components/Cards/Promo
 */
var styles = {
  "root": "findify-components--cards--promo",
  "content": "findify-components--cards--promo__content",
  "container": "findify-components--cards--promo__container",
  "button": "findify-components--cards--promo__button",
  "button-container": "findify-components--cards--promo__button-container",
  "title": "findify-components--cards--promo__title",
  "description": "findify-components--cards--promo__description",
  "footer": "findify-components--cards--promo__footer",
  "buttonContainer": "findify-components--cards--promo__button-container"
};
import { useCallback } from 'react';
import cx from 'classnames';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default (function (_ref) {
  var item = _ref.item,
      config = _ref.config,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme;
  var card = item.getIn(['cards', 0]);
  var onClick = useCallback(function (e) {
    if (!card.get('redirect_link')) return;
    e.preventDefault();
    window.open(card.get('redirect_link'), '_blank');
  }, [card]);
  return /*#__PURE__*/_jsxs("a", {
    onClick: onClick,
    className: cx(theme.root, "findify-promo-".concat(card.get('id'))),
    href: card.get('url'),
    children: [/*#__PURE__*/_jsxs("div", {
      className: theme.content,
      style: {
        backgroundColor: card.get('background_color') || 'transparent',
        backgroundImage: card.get('image_url') && "url(".concat(card.get('image_url'), ")")
      },
      children: [/*#__PURE__*/_jsxs("div", {
        className: theme.container,
        style: {
          color: card.getIn(['fe_settings', 'text_color'])
        },
        children: [card.get('top_header') ? /*#__PURE__*/_jsx("p", {
          className: theme.title,
          children: card.get('top_header')
        }) : null, card.get('sub_header') ? /*#__PURE__*/_jsx("p", {
          className: theme.description,
          children: card.get('sub_header')
        }) : null]
      }), /*#__PURE__*/_jsx("div", {
        className: theme.buttonContainer,
        children: card.get('cta_text') ? /*#__PURE__*/_jsx("button", {
          className: theme.button,
          onClick: onClick,
          style: {
            color: card.getIn(['fe_settings', 'button_color']),
            background: card.getIn(['fe_settings', 'button_background'])
          },
          children: card.get('cta_text')
        }) : null
      })]
    }), card.get('footer') ? /*#__PURE__*/_jsx("p", {
      className: theme.footer,
      style: {
        color: card.getIn(['fe_settings', 'footer_color'])
      },
      children: card.get('footer')
    }) : null]
  });
});