tbg-ecomm-nextjs/pages-sections/home/business_partner.js

import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);
const DataBusinessPartner = function ({ backend, businessPartners, ...props })  {
    const classes = useStyles();
    const BusinessPartners = businessPartners.map((data) => {
      return (
        <Card style={{width: "20rem"}}>
        <div align="center">
          <img
            style={{padding:"20px", height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
        </div>
        {/* src={`${variablebackenduri}/${data.img[0]["url"]}`} */}
      </Card>
      );
    })
    return (
      <div className={classes.section} id="notifications">
        <div align="center">
            <h2>Our Business Partner</h2>
        </div>
        <div>
          <GridContainer justify="center">
            <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
                {BusinessPartners[0]}
                {BusinessPartners[3]}
                {BusinessPartners[6]}
            </Grid>
            <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
                {BusinessPartners[1]}
                {BusinessPartners[4]}
                {BusinessPartners[7]}
            </Grid>
            <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
                {BusinessPartners[2]}
                {BusinessPartners[5]}
                {BusinessPartners[8]}
            </Grid>
          </GridContainer>
        </div>
      </div>
    );
}

export default DataBusinessPartner;