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

import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import ReactHtmlParser from "react-html-parser";

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

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";
import Icon from "@material-ui/core/Icon";

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 settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      time: 5
    };
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const Productdetails = detailproduct.map((data) => {
      return (
        <div>
        <GridContainer>
            <Grid fluid xs={5}> 
            <div className={classes.section} id="notifications">
              <div className={classes.section}>
                <div className={classes.container}>
                  <GridContainer>
                    <GridItem className={classes.marginAuto}>
                    <Card carousel>
                      <Carousel {...settings}>
                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[1]["url"]}`} />
                      </Carousel>
                    </Card>
                    </GridItem>
                  </GridContainer>
                </div>
              </div>
            </div>
            </Grid>
            <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
              <h3>{data.name}</h3>
              <h3>Rp.{data.price} - Stock Unit : {data.stock}</h3>
              <hr></hr>
              <div align="justify">
                <p>{ReactHtmlParser(data.description)}</p>
              </div>
              <Button color="info" round href={"/product_detail?s="+data.id} >
                <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
              </Button>
            </Grid>
        </GridContainer>
        <GridContainer justify="center">
          <GridItem>
          <NavPills
              color="primary"
              align="center"
              alignCenter
              tabs={[
                {
                  tabButton: "Overview",
                  tabIcon: Dashboard,
                  tabContent: (
                    <div>
                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                      <GridItem className={classes.marginAuto}>
                      <div align="justify">
                          {ReactHtmlParser(data.overview)}
                        </div>
                      </GridItem>
                    </GridContainer>
                    </div>
                  ),
                },
                {
                  tabButton: "Specification",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                      <GridItem className={classes.marginAuto}>
                        <div align="justify">
                          {ReactHtmlParser(data.specification)}
                        </div>
                      </GridItem>
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Accessories",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                      <GridItem className={classes.marginAuto}>
                        <div align="justify">
                          {ReactHtmlParser(data.description)}
                        </div>
                      </GridItem>
                    </GridContainer>
                  ),
                },
                {
                  tabButton: "Film",
                  tabIcon: Dashboard,
                  tabContent: (
                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                      <GridItem className={classes.marginAuto}>
                        <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;