tbg-ecomm-nextjs/pages-sections/honda/product/product.js

import React from "react";
import classNames from "classnames";

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

import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Icon from "@material-ui/core/Icon";
import { Motorcycle } from "@material-ui/icons";

const useStyles = makeStyles(styles);
const DataProduct = function ({ backend, car, ...props })  {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const ProductSuzuki = car.map((data) => {
        return (
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
                <CardBody>
                <div style={{padding:"10px"}}>
                    <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <h5>Rp.{data.price}</h5>
                    <Button 
                        color="info" round
                        href={"/honda/product/product_detail?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    <Button 
                        color="info" round
                        href={"/honda/checkout/checkout?s="+data.id}
                    >
                        <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })
    return (
    <Card className={classes.textCenter}>
        <div align="center">
            <CardHeader color="info">Product</CardHeader>
        </div>
        <CardBody>
            <div align="center">
            <h2>Product & Facilities</h2>
            </div>
            <GridContainer justify="center">
                <GridItem>
                <NavPills
                    alignCenter
                    color="primary"
                    tabs={[
                    {
                        tabButton: "XL7",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {ProductSuzuki}
                        </GridContainer>
                        ),
                    },
                    ]}
                />
                </GridItem>
            </GridContainer>
        </CardBody>
        </Card>
    );
}

export default DataProduct;