@b2bfinance/products-embed/es/ProductColumns.js

products-embed React component

import { Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import React from "react";

var useStyles = makeStyles(function (theme) {
  var _productColumnWrapper;

  return {
    productColumnWrapper: (_productColumnWrapper = {
      borderTop: "1px solid " + theme.palette.grey[200],
      padding: theme.spacing(2, 1),
      textAlign: "center",
      flexGrow: 0,
      flexBasis: "100%",
      maxWidth: "100%"
    }, _productColumnWrapper[theme.breakpoints.up("md")] = {
      flexBasis: function flexBasis(props) {
        return props.width + "%";
      },
      maxWidth: function maxWidth(props) {
        return props.width + "%";
      },
      margin: theme.spacing(2, 0),
      padding: theme.spacing(0, 2),
      borderTop: 0,
      borderRight: "1px solid " + theme.palette.grey[200]
    }, _productColumnWrapper["&:first-child"] = {
      borderTop: 0
    }, _productColumnWrapper)
  };
});

var ProductColumns = function ProductColumns(_ref) {
  var columns = _ref.columns;

  var classes = useStyles({
    width: 75 / columns.length
  });

  return columns.map(function (column, i) {
    return React.createElement(
      "div",
      { className: classes.productColumnWrapper, key: i },
      React.createElement(
        Typography,
        { variant: "subtitle2", component: "div", color: "textPrimary" },
        column.label
      ),
      React.createElement(
        Typography,
        { variant: "h5", component: "div", color: "textPrimary" },
        column.value
      ),
      column.subtext && React.createElement(
        Typography,
        { variant: "caption", component: "div", color: "textSecondary" },
        column.subtext
      )
    );
  });
};

export default ProductColumns;