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

products-embed React component

import { Grid, Hidden, Table, TableBody, TableCell, TableRow, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
import React from "react";

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

  return {
    productMoreInfoBodyWrapper: {
      padding: theme.spacing(2)
    },
    productMoreInfoBodyDisclaimer: (_productMoreInfoBodyD = {
      width: "100%",
      marginBottom: theme.spacing(2),
      backgroundColor: theme.palette.grey[200],
      padding: theme.spacing(2)
    }, _productMoreInfoBodyD[theme.breakpoints.up("md")] = {
      marginBottom: theme.spacing(4)
    }, _productMoreInfoBodyD),
    productMoreInfoBodyDetailRow: {
      height: 24
    },
    productMoreInfoBodyDetailCell: {
      border: 0
    }
  };
});

var ProductMoreInfoBody = function ProductMoreInfoBody(_ref) {
  var description = _ref.description,
      detailed = _ref.detailed,
      disclaimer = _ref.disclaimer;

  var classes = useStyles();

  return React.createElement(
    Grid,
    { className: classes.productMoreInfoBodyWrapper, container: true },
    disclaimer && React.createElement(
      "div",
      { className: classes.productMoreInfoBodyDisclaimer },
      React.createElement(
        Typography,
        null,
        disclaimer
      )
    ),
    React.createElement(
      Hidden,
      { smUp: true, implementation: "css" },
      description && React.createElement(
        Typography,
        { variant: "body2", paragraph: true },
        description
      )
    ),
    React.createElement(
      Grid,
      { container: true, spacing: 4 },
      detailed.map(function (detail) {
        return React.createElement(
          Grid,
          { item: true, xs: 12, sm: 6, lg: 4, key: detail.title },
          React.createElement(
            Typography,
            { variant: "h6" },
            detail.title
          ),
          React.createElement(
            Table,
            { padding: "none" },
            React.createElement(
              TableBody,
              null,
              detail.rows.map(function (row) {
                return row.label ? React.createElement(
                  TableRow,
                  {
                    className: classes.productMoreInfoBodyDetailRow,
                    key: row.label
                  },
                  React.createElement(
                    TableCell,
                    {
                      className: classes.productMoreInfoBodyDetailCell,
                      variant: "head"
                    },
                    row.label
                  ),
                  React.createElement(
                    TableCell,
                    {
                      className: classes.productMoreInfoBodyDetailCell,
                      align: "right"
                    },
                    row.value
                  )
                ) : React.createElement(
                  TableRow,
                  {
                    className: classes.productMoreInfoBodyDetailRow,
                    key: row.value
                  },
                  React.createElement(
                    TableCell,
                    {
                      className: classes.productMoreInfoBodyDetailCell
                    },
                    React.createElement(
                      Typography,
                      { paragraph: true },
                      row.value
                    )
                  )
                );
              })
            )
          )
        );
      })
    )
  );
};

export default ProductMoreInfoBody;