tbg-ecomm-nextjs/pages-sections/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, maxi, matic, naked, sport, offroad, moped, monsterenergy, cbu, ...props })  {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
      classes.imgRaised,
      classes.imgRoundedCircle,
      classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const Productmaxi = maxi.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={"/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                </div>
            </div>
            </CardBody>
        </Card>
        </div>
      );
    })
    const Productmatic = matic.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={"/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                </div>
            </div>
            </CardBody>
        </Card>
        </div>
      );
    })
    const Productnaked = naked.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={"/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                </div>
            </div>
            </CardBody>
        </Card>
        </div>
      );
    })
    const Productsport = sport.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={"/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                </div>
            </div>
            </CardBody>
        </Card>
        </div>
      );
    })
    const Productoffroad = offroad.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={"/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                </div>
            </div>
            </CardBody>
        </Card>
        </div>
      );
    })
    const Productmoped = moped.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={"/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                </div>
            </div>
            </CardBody>
        </Card>
        </div>
      );
    })
    const Productmonsterenergy = monsterenergy.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={"/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                </div>
            </div>
            </CardBody>
        </Card>
        </div>
      );
    })
    const Productcbu = cbu.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={"/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>Product & Facilities</h2>
        </div>
          <GridContainer justify="center">
            <GridItem>
              <NavPills
                alignCenter
                color="primary"
                tabs={[
                  {
                    tabButton: "Maxi",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productmaxi}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Matic",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productmatic}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Naked Bike",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productnaked}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Sport",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productsport}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Off Road",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productoffroad}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Moped",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productmoped}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Monster Energy MotoGP",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productmonsterenergy}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "CBU",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productcbu}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "ATV",
                    tabIcon: Motorcycle,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productcbu}
                      </GridContainer>
                    ),
                  },
                ]}
              />
            </GridItem>
          </GridContainer>
      </CardBody>
    </Card>
    );
}

export default DataProduct;