{"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\\\\sparepart\\\\sparepart.js\";\nvar _excluded = [\"backend\", \"ygp\", \"yamalube\", \"rconcept\", \"mtx\", \"extreme\", \"ranger\", \"fighter\", \"swirl\", \"classic\", \"uno\", \"apparel\", \"asia\", \"basic\", \"merchand\", \"maxi\", \"rainsuit\", \"motogp\", \"offroad\", \"accessories\"];\nvar __jsx = React.createElement;\nimport React from \"react\";\nimport classNames from \"classnames\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport GridContainer from \"components/Grid/GridContainer.js\";\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 Button from \"components/CustomButtons/Button.js\";\nimport styles from \"assets/jss/nextjs-material-kit/pages/profilePage.js\";\nimport Icon from \"@material-ui/core/Icon\";\nimport { Motorcycle } from \"@material-ui/icons\";\nimport NumberFormat from 'react-number-format';\nimport SnackbarContent from \"components/Snackbar/SnackbarContent.js\";\nvar useStyles = makeStyles(styles);\n\nvar DataProduct = function DataProduct(_ref) {\n  var _this = this;\n\n  var backend = _ref.backend,\n      ygp = _ref.ygp,\n      yamalube = _ref.yamalube,\n      rconcept = _ref.rconcept,\n      mtx = _ref.mtx,\n      extreme = _ref.extreme,\n      ranger = _ref.ranger,\n      fighter = _ref.fighter,\n      swirl = _ref.swirl,\n      classic = _ref.classic,\n      uno = _ref.uno,\n      apparel = _ref.apparel,\n      asia = _ref.asia,\n      basic = _ref.basic,\n      merchand = _ref.merchand,\n      maxi = _ref.maxi,\n      rainsuit = _ref.rainsuit,\n      motogp = _ref.motogp,\n      offroad = _ref.offroad,\n      accessories = _ref.accessories,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  var classes = useStyles();\n\n  var rest = _extends({}, props);\n\n  var imageClasses = classNames(classes.imgRaised, classes.imgRoundedCircle, classes.imgFluid);\n  var navImageClasses = classNames(classes.imgRounded, classes.imgGallery);\n  var YGP = ygp.map(function (data) {\n    return __jsx(\"div\", {\n      style: {\n        padding: \"20px\",\n        marginTop: \"-40px\"\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 51,\n        columnNumber: 13\n      }\n    }, __jsx(Card, {\n      className: classes.textCenter,\n      align: \"center\",\n      style: {\n        width: \"300px\"\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 52,\n        columnNumber: 17\n      }\n    }, __jsx(CardBody, {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 53,\n        columnNumber: 21\n      }\n    }, __jsx(\"div\", {\n      align: \"center\",\n      style: {\n        padding: \"10px\"\n      },\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 54,\n        columnNumber: 21\n      }\n    }, __jsx(\"img\", {\n      style: {\n        width: \"150px\",\n        display: \"block\"\n      },\n      src: \"\".concat(backend).concat(data.img[\"url\"]),\n      className: navImageClasses,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 55,\n        columnNumber: 25\n      }\n    }), __jsx(\"div\", {\n      align: \"center\",\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 57,\n        columnNumber: 25\n      }\n    }, __jsx(\"h5\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 58,\n        columnNumber: 25\n      }\n    }, __jsx(\"b\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 58,\n        columnNumber: 29\n      }\n    }, data.name)), __jsx(\"h5\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 59,\n        columnNumber: 25\n      }\n    }, __jsx(\"b\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 60,\n        columnNumber: 29\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: 60,\n        columnNumber: 32\n      }\n    }))), __jsx(\"br\", {\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 61,\n        columnNumber: 30\n      }\n    }), __jsx(Button, {\n      color: \"info\",\n      round: true,\n      href: \"/yamaha/product/ygp_detail?s=\" + data.id,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 62,\n        columnNumber: 25\n      }\n    }, __jsx(Icon, {\n      className: classes.icons,\n      __self: _this,\n      __source: {\n        fileName: _jsxFileName,\n        lineNumber: 66,\n        columnNumber: 29\n      }\n    }, \"open_in_new\"), \"Detail Product\"))))));\n  }); // const Yamalube = yamalube.map((data) => {\n  //     return (\n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //             <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\", height:\"350px\"}}>\n  //                 <CardBody>\n  //                 <div align=\"center\" style={{padding:\"10px\"}}>\n  //                     <img style={{ width: \"100px\", height:\"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                     />\n  //                     <div align=\"center\">\n  //                     <h5><b>{data.name}</b></h5>\n  //                     <h5>\n  //                         <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                     </h5><br/>\n  //                     <Button \n  //                         color=\"info\" round\n  //                         href={\"/yamaha/product/yamalube_detail?s=\"+data.id}\n  //                     >\n  //                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                     </Button>\n  //                     </div>\n  //                 </div>\n  //                 </CardBody>\n  //             </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetRConcepts = rconcept.map((data) => {\n  //     return (\n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //             <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //                 <CardBody>\n  //                 <div align=\"center\" style={{padding:\"10px\"}}>\n  //                     <img style={{ width: \"150px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                     />\n  //                     <div align=\"center\">\n  //                     <h5><b>{data.name}</b></h5>\n  //                     <h5>\n  //                         <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                     </h5>\n  //                     <Button \n  //                         color=\"info\" round\n  //                         href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                     >\n  //                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                     </Button>\n  //                     </div>\n  //                 </div>\n  //                 </CardBody>\n  //             </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetMTX = mtx.map((data) => {\n  //     return (      \n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetExtreme = extreme.map((data) => {\n  //     return (      \n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetRanger = ranger.map((data) => {\n  //     return (      \n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetFighter = fighter.map((data) => {\n  //     return (      \n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetSwirl = swirl.map((data) => {\n  //     return (      \n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetClassic = classic.map((data) => {\n  //     return (      \n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const HelmetUno = uno.map((data) => {\n  //     return (      \n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const ApparelRConcept = apparel.map((data) => {\n  //     return (\n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n  // const ApparelAsia = asia.map((data) => {\n  //     return (   \n  //     <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //     <Card className={classes.textCenter} align=\"center\" style={{width:\"350px\"}}>\n  //         <CardBody>\n  //         <div style={{padding:\"10px\"}}>\n  //             <img\n  //                 alt=\"...\"\n  //                 style={{ height: \"150px\", display: \"block\" }}\n  //                 src={`${backend}${data.img[\"url\"]}`}\n  //                 className={navImageClasses}\n  //             />\n  //             <div align=\"center\">\n  //             <h5><b>{data.name}</b></h5>\n  //             <h5>\n  //                 <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'}/></b>\n  //             </h5>\n  //             <Button \n  //                 color=\"info\" round\n  //                 href={\"/yamaha/product/apparel_details?s=\"+data.id}\n  //             >\n  //                 <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //             </Button>\n  //             </div>\n  //         </div>\n  //         </CardBody>\n  //     </Card>\n  //     </div>\n  //     );\n  // })\n  // const Accessories = accessories.map((data) => {\n  //     return (\n  //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \n  //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\n  //             <CardBody>\n  //             <div align=\"center\" style={{padding:\"10px\"}}>\n  //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\n  //                 />\n  //                 <div align=\"center\">\n  //                 <h5><b>{data.name}</b></h5>\n  //                 <h5>\n  //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\n  //                 </h5>\n  //                 <Button \n  //                     color=\"info\" round\n  //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\n  //                 >\n  //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\n  //                 </Button>\n  //                 </div>\n  //             </div>\n  //             </CardBody>\n  //         </Card>\n  //         </div>\n  //     );\n  // })\n\n  return __jsx(Card, {\n    className: classes.textCenter,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 405,\n      columnNumber: 5\n    }\n  }, __jsx(\"div\", {\n    align: \"center\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 406,\n      columnNumber: 9\n    }\n  }, __jsx(CardHeader, {\n    color: \"info\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 407,\n      columnNumber: 13\n    }\n  }, \"Product\")), __jsx(CardBody, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 409,\n      columnNumber: 9\n    }\n  }, __jsx(\"div\", {\n    align: \"center\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 410,\n      columnNumber: 13\n    }\n  }, __jsx(\"h2\", {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 411,\n      columnNumber: 13\n    }\n  }, __jsx(\"b\", {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 411,\n      columnNumber: 17\n    }\n  }, \"Sparepart & Accessories\"))), __jsx(GridContainer, {\n    justify: \"center\",\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 413,\n      columnNumber: 13\n    }\n  }, __jsx(GridItem, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 414,\n      columnNumber: 17\n    }\n  }, __jsx(NavPills, {\n    alignCenter: true,\n    color: \"primary\",\n    tabs: [{\n      tabButton: \"YGP\",\n      tabIcon: Motorcycle,\n      tabContent: __jsx(GridContainer, {\n        justify: \"center\",\n        __self: this,\n        __source: {\n          fileName: _jsxFileName,\n          lineNumber: 423,\n          columnNumber: 25\n        }\n      }, YGP)\n    } // {\n    //     tabButton: \"Yamalube\",\n    //     tabIcon: Motorcycle,\n    //     tabContent: (\n    //     <GridContainer justify=\"center\">\n    //         {Yamalube}\n    //     </GridContainer>\n    //     ),\n    // },\n    // {\n    //     tabButton: \"Helmet\",\n    //     tabIcon: Motorcycle,\n    //     tabContent: (\n    //         <div>\n    //             <div align=\"center\">\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>R CONCEPT</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetRConcepts}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>MTX</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetMTX}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>Extreme</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetExtreme}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>Ranger</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetRanger}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>Fighter</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetFighter}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>Swirl</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetSwirl}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>Classic</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetClassic}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>Uno</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {HelmetUno}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //         </div>\n    //     ),\n    // },\n    // {\n    //     tabButton: \"Apparel\",\n    //     tabIcon: Motorcycle,\n    //     tabContent: (\n    //         <div>\n    //             <div align=\"center\">\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>R Concept Apprael</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {ApparelRConcept}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //             <div align=\"center\">\n    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\n    //                     <SnackbarContent\n    //                     message={\n    //                         <h4><b>46 Asia</b></h4>\n    //                     }\n    //                     align=\"center\"\n    //                     color=\"info\"\n    //                     />\n    //                 </div>\n    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\n    //                     {ApparelAsia}\n    //                 </GridContainer>\n    //             </div><br></br><br></br>\n    //         </div>\n    //     ),\n    // },\n    // {\n    //     tabButton: \"Accessories\",\n    //     tabIcon: Motorcycle,\n    //     tabContent: (\n    //     <GridContainer justify=\"center\">\n    //         {Accessories}\n    //     </GridContainer>\n    //     ),\n    // },\n    ],\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 415,\n      columnNumber: 17\n    }\n  })))));\n};\n\nexport default DataProduct;","map":{"version":3,"sources":["E:/Project/tbg-ecomm-nextjs/pages-sections/yamaha/sparepart/sparepart.js"],"names":["React","classNames","makeStyles","GridContainer","GridItem","NavPills","Card","CardBody","CardHeader","Button","styles","Icon","Motorcycle","NumberFormat","SnackbarContent","useStyles","DataProduct","backend","ygp","yamalube","rconcept","mtx","extreme","ranger","fighter","swirl","classic","uno","apparel","asia","basic","merchand","maxi","rainsuit","motogp","offroad","accessories","props","classes","rest","imageClasses","imgRaised","imgRoundedCircle","imgFluid","navImageClasses","imgRounded","imgGallery","YGP","map","data","padding","marginTop","textCenter","width","display","img","name","price","id","icons","tabButton","tabIcon","tabContent"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SAASC,UAAT,QAA2B,0BAA3B;AACA,OAAOC,aAAP,MAA0B,kCAA1B;AACA,OAAOC,QAAP,MAAqB,6BAArB;AACA,OAAOC,QAAP,MAAqB,iCAArB;AACA,OAAOC,IAAP,MAAiB,yBAAjB;AACA,OAAOC,QAAP,MAAqB,6BAArB;AACA,OAAOC,UAAP,MAAuB,+BAAvB;AACA,OAAOC,MAAP,MAAmB,oCAAnB;AACA,OAAOC,MAAP,MAAmB,qDAAnB;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,OAAOC,eAAP,MAA4B,wCAA5B;AAEA,IAAMC,SAAS,GAAGb,UAAU,CAACQ,MAAD,CAA5B;;AACA,IAAMM,WAAW,GAAG,SAAdA,WAAc,OAoBU;AAAA;;AAAA,MAnB1BC,OAmB0B,QAnB1BA,OAmB0B;AAAA,MAlB1BC,GAkB0B,QAlB1BA,GAkB0B;AAAA,MAjB1BC,QAiB0B,QAjB1BA,QAiB0B;AAAA,MAhB1BC,QAgB0B,QAhB1BA,QAgB0B;AAAA,MAf1BC,GAe0B,QAf1BA,GAe0B;AAAA,MAd1BC,OAc0B,QAd1BA,OAc0B;AAAA,MAb1BC,MAa0B,QAb1BA,MAa0B;AAAA,MAZ1BC,OAY0B,QAZ1BA,OAY0B;AAAA,MAX1BC,KAW0B,QAX1BA,KAW0B;AAAA,MAV1BC,OAU0B,QAV1BA,OAU0B;AAAA,MAT1BC,GAS0B,QAT1BA,GAS0B;AAAA,MAR1BC,OAQ0B,QAR1BA,OAQ0B;AAAA,MAP1BC,IAO0B,QAP1BA,IAO0B;AAAA,MAN1BC,KAM0B,QAN1BA,KAM0B;AAAA,MAL1BC,QAK0B,QAL1BA,QAK0B;AAAA,MAJ1BC,IAI0B,QAJ1BA,IAI0B;AAAA,MAH1BC,QAG0B,QAH1BA,QAG0B;AAAA,MAF1BC,MAE0B,QAF1BA,MAE0B;AAAA,MAD1BC,OAC0B,QAD1BA,OAC0B;AAAA,MAA1BC,WAA0B,QAA1BA,WAA0B;AAAA,MAAVC,KAAU;;AAC1B,MAAMC,OAAO,GAAGvB,SAAS,EAAzB;;AACA,MAAWwB,IAAX,gBAAoBF,KAApB;;AACA,MAAMG,YAAY,GAAGvC,UAAU,CAC3BqC,OAAO,CAACG,SADmB,EAE3BH,OAAO,CAACI,gBAFmB,EAG3BJ,OAAO,CAACK,QAHmB,CAA/B;AAKA,MAAMC,eAAe,GAAG3C,UAAU,CAACqC,OAAO,CAACO,UAAT,EAAqBP,OAAO,CAACQ,UAA7B,CAAlC;AAEA,MAAMC,GAAG,GAAG7B,GAAG,CAAC8B,GAAJ,CAAQ,UAACC,IAAD,EAAU;AAC1B,WACI;AAAK,MAAA,KAAK,EAAE;AAACC,QAAAA,OAAO,EAAE,MAAV;AAAkBC,QAAAA,SAAS,EAAC;AAA5B,OAAZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACI,MAAC,IAAD;AAAM,MAAA,SAAS,EAAEb,OAAO,CAACc,UAAzB;AAAqC,MAAA,KAAK,EAAC,QAA3C;AAAoD,MAAA,KAAK,EAAE;AAACC,QAAAA,KAAK,EAAC;AAAP,OAA3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACI,MAAC,QAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACA;AAAK,MAAA,KAAK,EAAC,QAAX;AAAoB,MAAA,KAAK,EAAE;AAACH,QAAAA,OAAO,EAAC;AAAT,OAA3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACI;AAAK,MAAA,KAAK,EAAE;AAAEG,QAAAA,KAAK,EAAE,OAAT;AAAkBC,QAAAA,OAAO,EAAE;AAA3B,OAAZ;AAAkD,MAAA,GAAG,YAAKrC,OAAL,SAAegC,IAAI,CAACM,GAAL,CAAS,KAAT,CAAf,CAArD;AAAuF,MAAA,SAAS,EAAEX,eAAlG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADJ,EAGI;AAAK,MAAA,KAAK,EAAC,QAAX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAIK,IAAI,CAACO,IAAT,CAAJ,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAG,MAAC,YAAD;AAAc,MAAA,KAAK,EAAEP,IAAI,CAACQ,KAA1B;AAAiC,MAAA,WAAW,EAAE,MAA9C;AAAsD,MAAA,iBAAiB,EAAE,IAAzE;AAA+E,MAAA,MAAM,EAAE,KAAvF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAH,CADJ,CAFA,EAIK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAJL,EAKA,MAAC,MAAD;AACI,MAAA,KAAK,EAAC,MADV;AACiB,MAAA,KAAK,MADtB;AAEI,MAAA,IAAI,EAAE,kCAAgCR,IAAI,CAACS,EAF/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAII,MAAC,IAAD;AAAM,MAAA,SAAS,EAAEpB,OAAO,CAACqB,KAAzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAJJ,mBALA,CAHJ,CADA,CADJ,CADJ,CADJ;AAwBH,GAzBW,CAAZ,CAV0B,CAqC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACA,MAAC,IAAD;AAAM,IAAA,SAAS,EAAErB,OAAO,CAACc,UAAzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACI;AAAK,IAAA,KAAK,EAAC,QAAX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACI,MAAC,UAAD;AAAY,IAAA,KAAK,EAAC,MAAlB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eADJ,CADJ,EAII,MAAC,QAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACI;AAAK,IAAA,KAAK,EAAC,QAAX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAJ,CADA,CADJ,EAII,MAAC,aAAD;AAAe,IAAA,OAAO,EAAC,QAAvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACI,MAAC,QAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA,MAAC,QAAD;AACI,IAAA,WAAW,MADf;AAEI,IAAA,KAAK,EAAC,SAFV;AAGI,IAAA,IAAI,EAAE,CACN;AACIQ,MAAAA,SAAS,EAAE,KADf;AAEIC,MAAAA,OAAO,EAAEjD,UAFb;AAGIkD,MAAAA,UAAU,EACV,MAAC,aAAD;AAAe,QAAA,OAAO,EAAC,QAAvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACKf,GADL;AAJJ,KADM,CAUN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAvLM,KAHV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADA,CADJ,CAJJ,CAJJ,CADA;AA6MH,CA9kBD;;AAglBA,eAAe/B,WAAf","sourcesContent":["import React from \"react\";\r\nimport classNames from \"classnames\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\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 Button from \"components/CustomButtons/Button.js\";\r\nimport styles from \"assets/jss/nextjs-material-kit/pages/profilePage.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport { Motorcycle } from \"@material-ui/icons\";\r\nimport NumberFormat from 'react-number-format';\r\nimport SnackbarContent from \"components/Snackbar/SnackbarContent.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst DataProduct = function ({ \r\n    backend, \r\n    ygp,\r\n    yamalube,\r\n    rconcept,\r\n    mtx, \r\n    extreme, \r\n    ranger, \r\n    fighter, \r\n    swirl, \r\n    classic, \r\n    uno,\r\n    apparel,\r\n    asia, \r\n    basic,\r\n    merchand, \r\n    maxi, \r\n    rainsuit, \r\n    motogp, \r\n    offroad,\r\n    accessories, ...props })  {\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 navImageClasses = classNames(classes.imgRounded, classes.imgGallery);\r\n\r\n    const YGP = ygp.map((data) => {\r\n        return (\r\n            <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n                <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n                    <CardBody>\r\n                    <div align=\"center\" style={{padding:\"10px\"}}>\r\n                        <img style={{ width: \"150px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n                        />\r\n                        <div align=\"center\">\r\n                        <h5><b>{data.name}</b></h5>\r\n                        <h5>\r\n                            <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n                        </h5><br/>\r\n                        <Button \r\n                            color=\"info\" round\r\n                            href={\"/yamaha/product/ygp_detail?s=\"+data.id}\r\n                        >\r\n                            <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n                        </Button>\r\n                        </div>\r\n                    </div>\r\n                    </CardBody>\r\n                </Card>\r\n            </div>\r\n        );\r\n    })\r\n\r\n    // const Yamalube = yamalube.map((data) => {\r\n    //     return (\r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //             <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\", height:\"350px\"}}>\r\n    //                 <CardBody>\r\n    //                 <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                     <img style={{ width: \"100px\", height:\"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                     />\r\n    //                     <div align=\"center\">\r\n    //                     <h5><b>{data.name}</b></h5>\r\n    //                     <h5>\r\n    //                         <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                     </h5><br/>\r\n    //                     <Button \r\n    //                         color=\"info\" round\r\n    //                         href={\"/yamaha/product/yamalube_detail?s=\"+data.id}\r\n    //                     >\r\n    //                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                     </Button>\r\n    //                     </div>\r\n    //                 </div>\r\n    //                 </CardBody>\r\n    //             </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetRConcepts = rconcept.map((data) => {\r\n    //     return (\r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //             <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //                 <CardBody>\r\n    //                 <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                     <img style={{ width: \"150px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                     />\r\n    //                     <div align=\"center\">\r\n    //                     <h5><b>{data.name}</b></h5>\r\n    //                     <h5>\r\n    //                         <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                     </h5>\r\n    //                     <Button \r\n    //                         color=\"info\" round\r\n    //                         href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                     >\r\n    //                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                     </Button>\r\n    //                     </div>\r\n    //                 </div>\r\n    //                 </CardBody>\r\n    //             </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetMTX = mtx.map((data) => {\r\n    //     return (      \r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetExtreme = extreme.map((data) => {\r\n    //     return (      \r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetRanger = ranger.map((data) => {\r\n    //     return (      \r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetFighter = fighter.map((data) => {\r\n    //     return (      \r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetSwirl = swirl.map((data) => {\r\n    //     return (      \r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetClassic = classic.map((data) => {\r\n    //     return (      \r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const HelmetUno = uno.map((data) => {\r\n    //     return (      \r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const ApparelRConcept = apparel.map((data) => {\r\n    //     return (\r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    // const ApparelAsia = asia.map((data) => {\r\n    //     return (   \r\n    //     <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //     <Card className={classes.textCenter} align=\"center\" style={{width:\"350px\"}}>\r\n    //         <CardBody>\r\n    //         <div style={{padding:\"10px\"}}>\r\n    //             <img\r\n    //                 alt=\"...\"\r\n    //                 style={{ height: \"150px\", display: \"block\" }}\r\n    //                 src={`${backend}${data.img[\"url\"]}`}\r\n    //                 className={navImageClasses}\r\n    //             />\r\n    //             <div align=\"center\">\r\n    //             <h5><b>{data.name}</b></h5>\r\n    //             <h5>\r\n    //                 <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'}/></b>\r\n    //             </h5>\r\n    //             <Button \r\n    //                 color=\"info\" round\r\n    //                 href={\"/yamaha/product/apparel_details?s=\"+data.id}\r\n    //             >\r\n    //                 <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //             </Button>\r\n    //             </div>\r\n    //         </div>\r\n    //         </CardBody>\r\n    //     </Card>\r\n    //     </div>\r\n    //     );\r\n    // })\r\n\r\n    // const Accessories = accessories.map((data) => {\r\n    //     return (\r\n    //         <div style={{padding: \"20px\", marginTop:\"-40px\"}}>   \r\n    //         <Card className={classes.textCenter} align=\"center\" style={{width:\"300px\"}}>\r\n    //             <CardBody>\r\n    //             <div align=\"center\" style={{padding:\"10px\"}}>\r\n    //                 <img style={{ width: \"100px\", display: \"block\" }} src={`${backend}${data.img[\"url\"]}`} className={navImageClasses}\r\n    //                 />\r\n    //                 <div align=\"center\">\r\n    //                 <h5><b>{data.name}</b></h5>\r\n    //                 <h5>\r\n    //                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>\r\n    //                 </h5>\r\n    //                 <Button \r\n    //                     color=\"info\" round\r\n    //                     href={\"/yamaha/product/helmet_details?s=\"+data.id}\r\n    //                 >\r\n    //                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product\r\n    //                 </Button>\r\n    //                 </div>\r\n    //             </div>\r\n    //             </CardBody>\r\n    //         </Card>\r\n    //         </div>\r\n    //     );\r\n    // })\r\n\r\n    return (\r\n    <Card className={classes.textCenter}>\r\n        <div align=\"center\">\r\n            <CardHeader color=\"info\">Product</CardHeader>\r\n        </div>\r\n        <CardBody>\r\n            <div align=\"center\">\r\n            <h2><b>Sparepart & Accessories</b></h2>\r\n            </div>\r\n            <GridContainer justify=\"center\">\r\n                <GridItem>\r\n                <NavPills\r\n                    alignCenter\r\n                    color=\"primary\"\r\n                    tabs={[\r\n                    {\r\n                        tabButton: \"YGP\",\r\n                        tabIcon: Motorcycle,\r\n                        tabContent: (\r\n                        <GridContainer justify=\"center\">\r\n                            {YGP}\r\n                        </GridContainer>\r\n                        ),\r\n                    },\r\n                    // {\r\n                    //     tabButton: \"Yamalube\",\r\n                    //     tabIcon: Motorcycle,\r\n                    //     tabContent: (\r\n                    //     <GridContainer justify=\"center\">\r\n                    //         {Yamalube}\r\n                    //     </GridContainer>\r\n                    //     ),\r\n                    // },\r\n                    // {\r\n                    //     tabButton: \"Helmet\",\r\n                    //     tabIcon: Motorcycle,\r\n                    //     tabContent: (\r\n                    //         <div>\r\n                    //             <div align=\"center\">\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>R CONCEPT</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetRConcepts}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>MTX</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetMTX}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>Extreme</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetExtreme}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>Ranger</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetRanger}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>Fighter</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetFighter}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>Swirl</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetSwirl}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>Classic</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetClassic}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\" style={{marginTop:\"-50px\"}}>\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>Uno</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {HelmetUno}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //         </div>\r\n                    //     ),\r\n                    // },\r\n                    // {\r\n                    //     tabButton: \"Apparel\",\r\n                    //     tabIcon: Motorcycle,\r\n                    //     tabContent: (\r\n                    //         <div>\r\n                    //             <div align=\"center\">\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>R Concept Apprael</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {ApparelRConcept}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //             <div align=\"center\">\r\n                    //                 <div align=\"center\" className={classes.section} id=\"notifications\">\r\n                    //                     <SnackbarContent\r\n                    //                     message={\r\n                    //                         <h4><b>46 Asia</b></h4>\r\n                    //                     }\r\n                    //                     align=\"center\"\r\n                    //                     color=\"info\"\r\n                    //                     />\r\n                    //                 </div>\r\n                    //                 <GridContainer justify=\"center\" style={{padding:\"40px\", marginTop:\"-50px\"}}>\r\n                    //                     {ApparelAsia}\r\n                    //                 </GridContainer>\r\n                    //             </div><br></br><br></br>\r\n                    //         </div>\r\n                    //     ),\r\n                    // },\r\n                    // {\r\n                    //     tabButton: \"Accessories\",\r\n                    //     tabIcon: Motorcycle,\r\n                    //     tabContent: (\r\n                    //     <GridContainer justify=\"center\">\r\n                    //         {Accessories}\r\n                    //     </GridContainer>\r\n                    //     ),\r\n                    // },\r\n                    ]}\r\n                />\r\n                </GridItem>\r\n            </GridContainer>\r\n        </CardBody>\r\n    </Card>\r\n    );\r\n}\r\n\r\nexport default DataProduct;"]},"metadata":{},"sourceType":"module"}