tbg-ecomm-nextjs/pages-sections/honda/home/service.js

import React from "react";
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";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";

const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props })  {
    const classes = useStyles();
    const services = service.map((data, index) => (
        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
            <Card style={{width: "20rem"}}>
            <div align="center">
                <img
                style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
            </div>
            </Card>
        </Grid>
        ));
        return (
        <div className={classes.section} id="notifications">
            <div align="center">
            <div align="center" className={classes.section} id="notifications">
                <SnackbarContent
                message={
                    <h4>Our Service</h4>
                }
                align="center"
                color="info"
                />
            </div>
            </div>
            <div>
            <GridContainer style={{padding: "40px"}} justify="center">
                {services}
            </GridContainer>
            </div>
        </div>
    );
}

export default DataService;