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

products-embed React component

import { Grid, Typography } from "@material-ui/core";
import { orange } from "@material-ui/core/colors";
import WhatsHotIcon from "@material-ui/icons/Whatshot";
import { makeStyles } from "@material-ui/styles";
import React from "react";
import ProductLabels from "./ProductLabels";

var useStyles = makeStyles(function (theme) {
  var _productHeadingWrappe, _productLogoWrapper, _productLabels;

  return {
    productHeadingWrapper: (_productHeadingWrappe = {
      backgroundColor: theme.palette.grey[200],
      padding: theme.spacing(2)
    }, _productHeadingWrappe[theme.breakpoints.up("xs")] = {
      backgroundColor: "transparent",
      padding: 0,
      borderBottom: 0
    }, _productHeadingWrappe),
    productLogoWrapper: (_productLogoWrapper = {
      marginBottom: theme.spacing(1)
    }, _productLogoWrapper[theme.breakpoints.up("sm")] = {
      backgroundColor: theme.palette.common.white,
      display: "flex",
      padding: theme.spacing(1),
      margin: theme.spacing(0, 2, -1, 1.5),
      border: "1px solid " + theme.palette.grey[200],
      textAlign: "center",
      height: theme.spacing(11)
    }, _productLogoWrapper),
    productLogo: {
      maxWidth: "100%",
      maxHeight: "100%",
      margin: "auto"
    },
    productHighlightedIcon: {
      marginLeft: theme.spacing(0.5),
      color: orange[300]
    },
    productLabels: (_productLabels = {}, _productLabels[theme.breakpoints.up("sm")] = {
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "center"
    }, _productLabels)
  };
});

var ProductHeadingRow = function ProductHeadingRow(_ref) {
  var logo = _ref.logo,
      brand = _ref.brand,
      highlighted = _ref.highlighted,
      title = _ref.title,
      labels = _ref.labels;

  var classes = useStyles();

  return React.createElement(
    Grid,
    {
      className: classes.productHeadingWrapper,
      container: true,
      alignItems: "flex-start"
    },
    React.createElement(
      Grid,
      { item: true, xs: 12, sm: 3, md: 2 },
      React.createElement(
        "div",
        { className: classes.productLogoWrapper },
        React.createElement("img", { className: classes.productLogo, src: logo, alt: brand })
      )
    ),
    React.createElement(
      Grid,
      { item: true, xs: 12, sm: 5, md: 7 },
      React.createElement(
        Typography,
        { color: "textPrimary", component: Grid, container: true },
        React.createElement(
          Grid,
          { item: true, xs: 12 },
          React.createElement(
            Grid,
            { container: true, alignItems: "center" },
            React.createElement(
              Grid,
              { item: true },
              React.createElement(
                Typography,
                { variant: "h5", component: "p" },
                brand
              )
            ),
            React.createElement(
              Grid,
              { item: true },
              highlighted && React.createElement(WhatsHotIcon, { className: classes.productHighlightedIcon })
            )
          )
        ),
        React.createElement(
          Grid,
          { item: true, xs: 12 },
          React.createElement(
            Typography,
            null,
            title
          )
        )
      )
    ),
    labels && labels.length > 0 && React.createElement(
      Grid,
      { className: classes.productLabels, item: true, xs: 12, sm: 4, md: 3 },
      React.createElement(ProductLabels, { labels: labels })
    )
  );
};

export default ProductHeadingRow;