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";

const useStyles = makeStyles(styles);
const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes, bpr, emilia, homes, ...props })  {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
      classes.imgRaised,
      classes.imgRoundedCircle,
      classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const Productyamaha = yamaha.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </div>
      );
    })
    const Productsuzuki = suzuki.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </div>
      );
    })
    const Producthonda = honda.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </div>
      );
    })
    const Producthino = hino.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </div>
      );
    })
    const Productmercedes = mercedes.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </div>
      );
    })
    const Productbpr = bpr.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </div>
      );
    })
    const Productemilia = emilia.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </div>
      );
    })
    const Producthomes = homes.map((data) => {
      return (
        <div>
          <img
            alt="..."
            style={{ height: "350px", display: "block" }}
            src={`${backend}${data.img[0]["url"]}`}
            className={navImageClasses}
          />
          <div align="center">
            <h3>{data.name}</h3>
            <h4>Rp.{data.price}</h4>
            <Button 
              color="info" round
              href={"/product_detail?s="+data.id}
            >
              <Icon className={classes.icons}>open_in_new</Icon>Detail Product
            </Button>
          </div>
        </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 Yamaha",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productyamaha}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Matic",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productsuzuki}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Naked Bike",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Producthonda}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Sport",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Producthino}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Off Road",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productmercedes}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Moped",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productmercedes}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Monster Energy MotoGP",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Productemilia}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "CBU",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Producthomes}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "ATV",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Producthomes}
                      </GridContainer>
                    ),
                  },
                  {
                    tabButton: "Power Product",
                    tabIcon: Dashboard,
                    tabContent: (
                      <GridContainer justify="center">
                        {Producthomes}
                      </GridContainer>
                    ),
                  },
                ]}
              />
            </GridItem>
          </GridContainer>
      </CardBody>
    </Card>
    );
}

export default DataProduct;