@b2bfinance/products-embed/lib/ProductFeaturedPoint.js

products-embed React component

"use strict";

exports.__esModule = true;

var _core = require("@material-ui/core");

var _colors = require("@material-ui/core/colors");

var _GradeOutlined = require("@material-ui/icons/GradeOutlined");

var _GradeOutlined2 = _interopRequireDefault(_GradeOutlined);

var _styles = require("@material-ui/styles");

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    productFeaturePointWrapper: {
      backgroundColor: theme.palette.grey[200],
      padding: theme.spacing(1, 2),
      lineHeight: 0
    },
    productFeaturePointIcon: {
      color: _colors.pink[300]
    },
    productFeatureDescription: {
      marginLeft: theme.spacing(0.5)
    }
  };
});

var ProductFeaturePoint = function ProductFeaturePoint(_ref) {
  var description = _ref.description;

  var classes = useStyles();

  return _react2.default.createElement(
    _core.Grid,
    {
      className: classes.productFeaturePointWrapper,
      container: true,
      alignItems: "center"
    },
    _react2.default.createElement(
      _core.Grid,
      { item: true },
      _react2.default.createElement(
        "div",
        { className: classes.productFeaturePointIcon },
        _react2.default.createElement(_GradeOutlined2.default, { fontSize: "small" })
      )
    ),
    _react2.default.createElement(
      _core.Grid,
      { item: true },
      _react2.default.createElement(
        _core.Typography,
        { variant: "subtitle1" },
        _react2.default.createElement(
          "div",
          { className: classes.productFeatureDescription },
          description
        )
      )
    )
  );
};

exports.default = ProductFeaturePoint;
module.exports = exports["default"];