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

products-embed React component

import { Grid, Hidden, IconButton, Typography } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import { makeStyles } from "@material-ui/styles";
import React from "react";

var useStyles = makeStyles(function (theme) {
  return {
    productMoreInfoHeaderWrapper: {
      padding: theme.spacing(1),
      borderBottom: "2px solid " + theme.palette.grey[200]
    },
    productMoreInfoHeaderLogoWrapper: {
      border: "2px solid " + theme.palette.grey[200],
      display: "flex",
      height: 100,
      width: 150
    },
    productMoreInfoHeaderLogo: {
      maxWidth: "100%",
      maxHeight: "100%",
      margin: "auto"
    },
    productMoreInfoHeaderCloseButton: {
      position: "absolute",
      top: theme.spacing(1),
      right: theme.spacing(1)
    }
  };
});

var ProductMoreInfoHeader = function ProductMoreInfoHeader(_ref) {
  var title = _ref.title,
      brand = _ref.brand,
      logo = _ref.logo,
      onClose = _ref.onClose;

  var classes = useStyles();

  return React.createElement(
    "div",
    { className: classes.productMoreInfoHeaderWrapper },
    React.createElement(
      Grid,
      { container: true },
      React.createElement(
        Hidden,
        { xsDown: true },
        React.createElement(
          Grid,
          { item: true, sm: 3, md: 3, xl: 2 },
          React.createElement(
            "div",
            { className: classes.productMoreInfoHeaderLogoWrapper },
            React.createElement("img", {
              className: classes.productMoreInfoHeaderLogo,
              src: logo,
              alt: brand
            })
          )
        )
      ),
      React.createElement(
        Grid,
        { item: true, sm: 9, md: 9, xl: 10, mt: 1 },
        React.createElement(
          Grid,
          { container: true },
          React.createElement(
            Grid,
            { item: true, xs: 12 },
            React.createElement(
              Typography,
              { variant: "h4" },
              brand
            )
          ),
          React.createElement(
            Grid,
            { item: true, xs: 12 },
            React.createElement(
              Typography,
              { variant: "subtitle1" },
              title
            )
          )
        )
      )
    ),
    React.createElement(
      "div",
      { className: classes.productMoreInfoHeaderCloseButton },
      React.createElement(
        IconButton,
        { "aria-label": "Close", onClick: onClose },
        React.createElement(CloseIcon, null)
      )
    )
  );
};

export default ProductMoreInfoHeader;