{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nvar _jsxFileName = \"E:\\\\Project\\\\tbg-ecomm-nextjs\\\\pages-sections\\\\yamaha\\\\product\\\\product_details.js\";\nvar _excluded = [\"backend\", \"detailproduct\"];\nvar __jsx = React.createElement;\nimport React, { useState, useEffect } from \"react\";\nimport classNames from \"classnames\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport ReactHtmlParser from \"react-html-parser\";\nimport Dashboard from \"@material-ui/icons/Dashboard\";\nimport Icon from \"@material-ui/core/Icon\";\nimport GridContainer from \"components/Grid/GridContainer.js\";\nimport Grid from '@material-ui/core/Grid';\nimport GridItem from \"components/Grid/GridItem.js\";\nimport NavPills from \"components/NavPills/NavPills.js\";\nimport Card from \"components/Card/Card.js\";\nimport CardBody from \"components/Card/CardBody.js\";\nimport CardHeader from \"components/Card/CardHeader.js\";\nimport CardFooter from \"components/Card/CardFooter.js\";\nimport Button from \"components/CustomButtons/Button.js\";\nimport styles from \"assets/jss/nextjs-material-kit/pages/profilePage.js\";\nimport Carousel from \"react-slick\";\nimport NumberFormat from 'react-number-format';\nvar useStyles = makeStyles(styles);\n\nvar DataProduct = function DataProduct(_ref) {\n  var _this = this;\n\n  var backend = _ref.backend,\n      detailproduct = _ref.detailproduct,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  console.log(detailproduct);\n  var classes = useStyles();\n\n  var rest = _extends({}, props);\n\n  var imageClasses = classNames(classes.imgRaised, classes.imgRoundedCircle, classes.imgFluid);\n  var settings = {\n    dots: true,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    autoplay: true,\n    time: 5\n  };\n  var navImageClasses = classNames(classes.imgRounded, classes.imgGallery);\n  var Productdetails = detailproduct.map(function (data) {\n    return __jsx(\"div\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 44,\n        columnNumber: 9\n      }\n    }, __jsx(GridContainer, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 45,\n        columnNumber: 9\n      }\n    }, __jsx(Grid, {\n      fluid: true,\n      xs: 5,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 46,\n        columnNumber: 13\n      }\n    }, __jsx(\"div\", {\n      className: classes.section,\n      id: \"notifications\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 47,\n        columnNumber: 13\n      }\n    }, __jsx(\"div\", {\n      className: classes.section,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 48,\n        columnNumber: 15\n      }\n    }, __jsx(\"div\", {\n      className: classes.container,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 49,\n        columnNumber: 17\n      }\n    }, __jsx(GridContainer, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 50,\n        columnNumber: 19\n      }\n    }, __jsx(GridItem, {\n      className: classes.marginAuto,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 51,\n        columnNumber: 21\n      }\n    }, __jsx(Card, {\n      carousel: true,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 52,\n        columnNumber: 21\n      }\n    }, __jsx(Carousel, _extends({}, settings, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 53,\n        columnNumber: 23\n      }\n    }), __jsx(\"img\", {\n      className: navImageClasses,\n      width: \"300px\",\n      alt: \"First slide\",\n      src: \"\".concat(backend).concat(data.img[0][\"url\"]),\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 54,\n        columnNumber: 25\n      }\n    }))))))))), __jsx(Grid, {\n      xs: 7,\n      style: {\n        padding: \"40px\",\n        marginTop: \"-30px\"\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 66,\n        columnNumber: 13\n      }\n    }, __jsx(\"h3\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 67,\n        columnNumber: 15\n      }\n    }, data.name), __jsx(\"h3\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 68,\n        columnNumber: 15\n      }\n    }, __jsx(NumberFormat, {\n      value: data.price,\n      displayType: 'text',\n      thousandSeparator: true,\n      prefix: 'Rp.',\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 68,\n        columnNumber: 19\n      }\n    }), \" - Stock Unit : \", data.stock), __jsx(\"hr\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 69,\n        columnNumber: 15\n      }\n    }), __jsx(\"div\", {\n      align: \"justify\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 70,\n        columnNumber: 15\n      }\n    }, __jsx(\"p\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 71,\n        columnNumber: 17\n      }\n    }, ReactHtmlParser(data.description))))), __jsx(GridContainer, {\n      justify: \"center\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 87,\n        columnNumber: 9\n      }\n    }, __jsx(GridItem, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 88,\n        columnNumber: 11\n      }\n    }, __jsx(NavPills, {\n      color: \"primary\",\n      align: \"center\",\n      alignCenter: true,\n      tabs: [// {\n      //   tabButton: \"Overview\",\n      //   tabIcon: Dashboard,\n      //   tabContent: (\n      //     <div>\n      //     <GridItem className={classes.marginAuto}>\n      //         <div align=\"justify\">\n      //          <table>\n      //             <tr>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>\n      //               </td>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview1[\"url\"]}`} />\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview2[\"url\"]}`} />\n      //               </td>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>\n      //               </td>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview3[\"url\"]}`} />\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview4[\"url\"]}`} />\n      //               </td>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>\n      //               </td>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview5[\"url\"]}`} />\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview6[\"url\"]}`} />\n      //               </td>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>\n      //               </td>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview7[\"url\"]}`} />\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview8[\"url\"]}`} />\n      //               </td>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>\n      //               </td>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview9[\"url\"]}`} />\n      //               </td>\n      //             </tr>\n      //             <tr>\n      //               <td>\n      //                 <img src={`${backend}${data.img_overview10[\"url\"]}`} />\n      //               </td>\n      //               <td>\n      //                 <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>\n      //               </td>\n      //             </tr>\n      //           </table>\n      //         </div>\n      //       </GridItem>\n      //     </div>\n      //   ),\n      // },\n      {\n        tabButton: \"Specification\",\n        tabIcon: Dashboard,\n        tabContent: __jsx(GridContainer, {\n          justify: \"center\",\n          style: {\n            padding: \"40px\",\n            marginTop: \"-30px\"\n          },\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 192,\n            columnNumber: 21\n          }\n        }, __jsx(GridItem, {\n          className: classes.marginAuto,\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 193,\n            columnNumber: 23\n          }\n        }, __jsx(\"div\", {\n          align: \"justify\",\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 194,\n            columnNumber: 25\n          }\n        }, __jsx(\"h2\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 195,\n            columnNumber: 27\n          }\n        }, \"Spesifikasi Mesin\"), ReactHtmlParser(data.spesifikasi_mesin), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 196,\n            columnNumber: 68\n          }\n        }), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 196,\n            columnNumber: 73\n          }\n        }), __jsx(\"h2\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 198,\n            columnNumber: 27\n          }\n        }, \"Spesifikasi Dimensi\"), ReactHtmlParser(data.spesifikasi_dimensi), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 199,\n            columnNumber: 70\n          }\n        }), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 199,\n            columnNumber: 75\n          }\n        }), __jsx(\"h2\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 201,\n            columnNumber: 27\n          }\n        }, \"Spesifikasi Rangka\"), ReactHtmlParser(data.spesifikasi_rangka), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 202,\n            columnNumber: 69\n          }\n        }), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 202,\n            columnNumber: 74\n          }\n        }), __jsx(\"h2\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 204,\n            columnNumber: 27\n          }\n        }, \"Spesifikasi Kelistrikan\"), ReactHtmlParser(data.spesifikasi_kelistrikan), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 205,\n            columnNumber: 74\n          }\n        }), __jsx(\"br\", {\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 205,\n            columnNumber: 79\n          }\n        }))))\n      }, {\n        tabButton: \"Film\",\n        tabIcon: Dashboard,\n        tabContent: __jsx(GridContainer, {\n          justify: \"center\",\n          style: {\n            padding: \"40px\",\n            marginTop: \"-30px\"\n          },\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 215,\n            columnNumber: 21\n          }\n        }, __jsx(GridItem, {\n          className: classes.marginAuto,\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 216,\n            columnNumber: 23\n          }\n        }, __jsx(\"div\", {\n          align: \"justify\",\n          __self: _this,\n          __source: {\n            fileName: _jsxFileName,\n            lineNumber: 217,\n            columnNumber: 25\n          }\n        }, ReactHtmlParser(data.film))))\n      }],\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 89,\n        columnNumber: 11\n      }\n    }))));\n  });\n  return __jsx(Card, {\n    className: classes.textCenter,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 232,\n      columnNumber: 7\n    }\n  }, __jsx(\"div\", {\n    align: \"center\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 233,\n      columnNumber: 7\n    }\n  }, __jsx(CardHeader, {\n    color: \"info\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 234,\n      columnNumber: 9\n    }\n  }, \"Product Detail\")), __jsx(CardBody, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 236,\n      columnNumber: 7\n    }\n  }, __jsx(\"div\", {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 237,\n      columnNumber: 11\n    }\n  }, Productdetails)), __jsx(CardFooter, {\n    className: classes.textMuted,\n    textAlign: \"center\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 241,\n      columnNumber: 7\n    }\n  }, \"\\xA9 2020 , All Right Reserved by @Thamrin Brother Company\"));\n};\n\nexport default DataProduct;","map":{"version":3,"sources":["E:/Project/tbg-ecomm-nextjs/pages-sections/yamaha/product/product_details.js"],"names":["React","useState","useEffect","classNames","makeStyles","ReactHtmlParser","Dashboard","Icon","GridContainer","Grid","GridItem","NavPills","Card","CardBody","CardHeader","CardFooter","Button","styles","Carousel","NumberFormat","useStyles","DataProduct","backend","detailproduct","props","console","log","classes","rest","imageClasses","imgRaised","imgRoundedCircle","imgFluid","settings","dots","infinite","speed","slidesToShow","slidesToScroll","autoplay","time","navImageClasses","imgRounded","imgGallery","Productdetails","map","data","section","container","marginAuto","img","padding","marginTop","name","price","stock","description","tabButton","tabIcon","tabContent","spesifikasi_mesin","spesifikasi_dimensi","spesifikasi_rangka","spesifikasi_kelistrikan","film","textCenter","textMuted"],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport Dashboard from \"@material-ui/icons/Dashboard\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Grid from '@material-ui/core/Grid';\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport NavPills from \"components/NavPills/NavPills.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport styles from \"assets/jss/nextjs-material-kit/pages/profilePage.js\";\r\nimport Carousel from \"react-slick\";\r\nimport NumberFormat from 'react-number-format';\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst DataProduct = function ({ backend, detailproduct, ...props })  {\r\n  console.log(detailproduct);\r\n    const classes = useStyles();\r\n    const { ...rest } = props;\r\n    const imageClasses = classNames(\r\n      classes.imgRaised,\r\n      classes.imgRoundedCircle,\r\n      classes.imgFluid\r\n    );\r\n    const settings = {\r\n      dots: true,\r\n      infinite: true,\r\n      speed: 500,\r\n      slidesToShow: 1,\r\n      slidesToScroll: 1,\r\n      autoplay: true,\r\n      time: 5\r\n    };\r\n    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);\r\n    const Productdetails = detailproduct.map((data) => {\r\n      return (\r\n        <div>\r\n        <GridContainer>\r\n            <Grid fluid xs={5}> \r\n            <div className={classes.section} id=\"notifications\">\r\n              <div className={classes.section}>\r\n                <div className={classes.container}>\r\n                  <GridContainer>\r\n                    <GridItem className={classes.marginAuto}>\r\n                    <Card carousel>\r\n                      <Carousel {...settings}>\r\n                        <img className={navImageClasses} width=\"300px\" alt=\"First slide\" src={`${backend}${data.img[0][\"url\"]}`} />\r\n                      </Carousel>\r\n                    </Card>\r\n                    {/* <Button color=\"info\" round href={\"/product_detail?s=\"+data.id}>\r\n                      <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart\r\n                    </Button> */}\r\n                    </GridItem>\r\n                  </GridContainer>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            </Grid>\r\n            <Grid xs={7} style={{padding:\"40px\", marginTop:\"-30px\"}}>\r\n              <h3>{data.name}</h3>\r\n              <h3><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> - Stock Unit : {data.stock}</h3>\r\n              <hr></hr>\r\n              <div align=\"justify\">\r\n                <p>{ReactHtmlParser(data.description)}</p>\r\n              </div>\r\n              {/* <GridContainer>\r\n                <Grid className={classes.marginAuto} style={{padding:\"10px\", marginTop:\"-30px\"}}>\r\n                  <Card className={classes.marginAuto} style={{height: \"165px\", width: \"165px\"}}>\r\n                    <img src=\"https://www.yamaha-motor.co.id/uploads/products/2021022311424212835Z1732.png\"/>\r\n                  </Card>\r\n                </Grid>\r\n                <Grid className={classes.marginAuto} style={{padding:\"10px\", marginTop:\"-30px\"}}>\r\n                  <Card className={classes.marginAuto} style={{height: \"165px\", width: \"165px\"}}>\r\n                    <img src=\"https://www.yamaha-motor.co.id/uploads/products/2021022311424235104F62455.png\"/>\r\n                  </Card>\r\n                </Grid>\r\n              </GridContainer> */}\r\n            </Grid>\r\n        </GridContainer>\r\n        <GridContainer justify=\"center\">\r\n          <GridItem>\r\n          <NavPills\r\n              color=\"primary\"\r\n              align=\"center\"\r\n              alignCenter\r\n              tabs={[\r\n                // {\r\n                //   tabButton: \"Overview\",\r\n                //   tabIcon: Dashboard,\r\n                //   tabContent: (\r\n                //     <div>\r\n                //     <GridItem className={classes.marginAuto}>\r\n                //         <div align=\"justify\">\r\n                //          <table>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>\r\n                //               </td>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview1[\"url\"]}`} />\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview2[\"url\"]}`} />\r\n                //               </td>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>\r\n                //               </td>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview3[\"url\"]}`} />\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview4[\"url\"]}`} />\r\n                //               </td>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>\r\n                //               </td>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview5[\"url\"]}`} />\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview6[\"url\"]}`} />\r\n                //               </td>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>\r\n                //               </td>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview7[\"url\"]}`} />\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview8[\"url\"]}`} />\r\n                //               </td>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>\r\n                //               </td>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview9[\"url\"]}`} />\r\n                //               </td>\r\n                //             </tr>\r\n                //             <tr>\r\n                //               <td>\r\n                //                 <img src={`${backend}${data.img_overview10[\"url\"]}`} />\r\n                //               </td>\r\n                //               <td>\r\n                //                 <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>\r\n                //               </td>\r\n                //             </tr>\r\n                //           </table>\r\n                //         </div>\r\n                //       </GridItem>\r\n                //     </div>\r\n                //   ),\r\n                // },\r\n                {\r\n                  tabButton: \"Specification\",\r\n                  tabIcon: Dashboard,\r\n                  tabContent: (\r\n                    <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-30px\"}}>\r\n                      <GridItem className={classes.marginAuto}>\r\n                        <div align=\"justify\">\r\n                          <h2>Spesifikasi Mesin</h2>\r\n                          {ReactHtmlParser(data.spesifikasi_mesin)}<br/><br/>\r\n\r\n                          <h2>Spesifikasi Dimensi</h2>\r\n                          {ReactHtmlParser(data.spesifikasi_dimensi)}<br/><br/>\r\n\r\n                          <h2>Spesifikasi Rangka</h2>\r\n                          {ReactHtmlParser(data.spesifikasi_rangka)}<br/><br/>\r\n\r\n                          <h2>Spesifikasi Kelistrikan</h2>\r\n                          {ReactHtmlParser(data.spesifikasi_kelistrikan)}<br/><br/>\r\n                        </div>\r\n                      </GridItem>\r\n                    </GridContainer>\r\n                  ),\r\n                },\r\n                {\r\n                  tabButton: \"Film\",\r\n                  tabIcon: Dashboard,\r\n                  tabContent: (\r\n                    <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-30px\"}}>\r\n                      <GridItem className={classes.marginAuto}>\r\n                        <div align=\"justify\">\r\n                          {ReactHtmlParser(data.film)}\r\n                        </div>\r\n                      </GridItem>\r\n                    </GridContainer>\r\n                  ),\r\n                },\r\n              ]}\r\n            />\r\n          </GridItem>\r\n        </GridContainer>\r\n        </div> \r\n      );\r\n    })\r\n    return (\r\n      <Card className={classes.textCenter}>\r\n      <div align=\"center\">\r\n        <CardHeader color=\"info\">Product Detail</CardHeader>\r\n      </div>\r\n      <CardBody>\r\n          <div> \r\n            {Productdetails}\r\n          </div>\r\n      </CardBody>\r\n      <CardFooter className={classes.textMuted} textAlign=\"center\">\r\n        © 2020 , All Right Reserved by @Thamrin Brother Company\r\n      </CardFooter>\r\n    </Card>\r\n    );\r\n}\r\n\r\nexport default DataProduct;"]},"metadata":{},"sourceType":"module"}