tbg-ecomm-nextjs/pages-sections/suzuki/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 NumberFormat from 'react-number-format';
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><b>{data.name}</b></h5>
                  <h5><b>
                    <NumberFormat value={data.price1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> s/d  <NumberFormat value={data.price2} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                  </b></h5>
                  <Button
                      color="info" round
                      href={"/suzuki/product/product_detail?s="+data.id}
                  >
                      <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                  </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><b>Product & Facilities</b></h2>
        </div>
          <GridContainer justify="center">
            <GridItem>
              <GridContainer justify="center">
                {ProductSuzuki}
              </GridContainer>
            </GridItem>
          </GridContainer>
      </CardBody>
    </Card>
    );
}

export default DataProduct;