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

import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

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

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
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 Carousel from "react-slick";

const useStyles = makeStyles(styles);

const DataProduct = function ({ backend, detailproduct, ...props })  {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
      classes.imgRaised,
      classes.imgRoundedCircle,
      classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const Productdetails = detailproduct.map((data) => {
      return (
        <div>
        <GridContainer>
          <Grid>
            <div className={classes.section}>
              <div className={classes.container}>
                <Card style={{width:"500px", height:"400px"}}>
                    <div>
                      <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                    </div>
                </Card>
              </div>
            </div>
          </Grid>
          <Grid style={{padding:"40px", marginTop:"-30px"}}>
            <h3>{data.name}</h3>
            <h3>Rp.{data.price}</h3>
            <hr></hr>
            <p>{data.description} ---- Stock Unit : {data.stock}</p>
          </Grid>
        </GridContainer>
        <GridContainer justify="center">
          <GridItem>
          <NavPills
              color="primary"
              align="center"
              tabs={[
                {
                  tabButton: "Overview",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">
                      <GridItem>
                        {data.overview}
                      </GridItem>
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Specification",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">
                      <GridItem>
                        {data.specification}
                      </GridItem>
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Accessories",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">
                      <GridItem>
                        {data.accessories}
                      </GridItem>
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Film",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center">
                      <GridItem>
                        <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                      </GridItem>
                    </GridContainer>
                  ),
                },
              ]}
            />
          </GridItem>
        </GridContainer>
        </div> 
      );
    })
    return (
      <Card className={classes.textCenter}>
      <div align="center">
        <CardHeader color="info">Product Detail</CardHeader>
      </div>
      <CardBody>
          <div> 
            {Productdetails}
          </div>
      </CardBody>
      <CardFooter className={classes.textMuted} textAlign="center">
        © 2020 , All Right Reserved by @Thamrin Brother Company
      </CardFooter>
    </Card>
    );
}

export default DataProduct;