You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

343 lines
15 KiB

  1. import React, { useState, useEffect } from "react";
  2. import classNames from "classnames";
  3. import { makeStyles } from "@material-ui/core/styles";
  4. import ReactHtmlParser from "react-html-parser";
  5. import Dashboard from "@material-ui/icons/Dashboard";
  6. import Icon from "@material-ui/core/Icon";
  7. import GridContainer from "components/Grid/GridContainer.js";
  8. import Grid from '@material-ui/core/Grid';
  9. import GridItem from "components/Grid/GridItem.js";
  10. import NavPills from "components/NavPills/NavPills.js";
  11. import Card from "components/Card/Card.js";
  12. import CardBody from "components/Card/CardBody.js";
  13. import CardHeader from "components/Card/CardHeader.js";
  14. import CardFooter from "components/Card/CardFooter.js";
  15. import Button from "components/CustomButtons/Button.js";
  16. import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
  17. import Carousel from "react-slick";
  18. import NumberFormat from 'react-number-format';
  19. const useStyles = makeStyles(styles);
  20. const DataProduct = function ({ backend, detailproduct, ...props }) {
  21. console.log(detailproduct);
  22. const classes = useStyles();
  23. const { ...rest } = props;
  24. const imageClasses = classNames(
  25. classes.imgRaised,
  26. classes.imgRoundedCircle,
  27. classes.imgFluid
  28. );
  29. const settings = {
  30. dots: true,
  31. infinite: true,
  32. speed: 500,
  33. slidesToShow: 1,
  34. slidesToScroll: 1,
  35. autoplay: true,
  36. time: 5
  37. };
  38. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  39. const Productdetails = detailproduct.map((data) => {
  40. return (
  41. <div>
  42. <GridContainer>
  43. <Grid fluid xs={5}>
  44. <div className={classes.section} id="notifications">
  45. <div className={classes.section}>
  46. <div className={classes.container}>
  47. <GridContainer>
  48. <GridItem className={classes.marginAuto}>
  49. <Card carousel>
  50. <Carousel {...settings}>
  51. <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
  52. </Carousel>
  53. </Card>
  54. {/* <Button color="info" round href={"/product_detail?s="+data.id}>
  55. <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
  56. </Button> */}
  57. </GridItem>
  58. </GridContainer>
  59. </div>
  60. </div>
  61. </div>
  62. </Grid>
  63. <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
  64. <h3>{data.name}</h3>
  65. <h3><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> - Stock Unit : {data.stock}</h3>
  66. <hr></hr>
  67. <div align="justify">
  68. <p>{ReactHtmlParser(data.description)}</p>
  69. </div>
  70. {/* <GridContainer>
  71. <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
  72. <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
  73. <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424212835Z1732.png"/>
  74. </Card>
  75. </Grid>
  76. <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
  77. <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
  78. <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424235104F62455.png"/>
  79. </Card>
  80. </Grid>
  81. </GridContainer> */}
  82. </Grid>
  83. </GridContainer>
  84. <GridContainer justify="center">
  85. <GridItem>
  86. <NavPills
  87. color="primary"
  88. align="center"
  89. alignCenter
  90. tabs={[
  91. // {
  92. // tabButton: "Overview",
  93. // tabIcon: Dashboard,
  94. // tabContent: (
  95. // <div>
  96. // <GridItem className={classes.marginAuto}>
  97. // <div align="justify">
  98. // <table>
  99. // <tr>
  100. // <td>
  101. // <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>
  102. // </td>
  103. // <td>
  104. // <img src={`${backend}${data.img_overview1["url"]}`} />
  105. // </td>
  106. // </tr>
  107. // <tr>
  108. // <td>
  109. // <img src={`${backend}${data.img_overview2["url"]}`} />
  110. // </td>
  111. // <td>
  112. // <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>
  113. // </td>
  114. // </tr>
  115. // <tr>
  116. // <td>
  117. // <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>
  118. // </td>
  119. // <td>
  120. // <img src={`${backend}${data.img_overview3["url"]}`} />
  121. // </td>
  122. // </tr>
  123. // <tr>
  124. // <td>
  125. // <img src={`${backend}${data.img_overview4["url"]}`} />
  126. // </td>
  127. // <td>
  128. // <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>
  129. // </td>
  130. // </tr>
  131. // <tr>
  132. // <td>
  133. // <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>
  134. // </td>
  135. // <td>
  136. // <img src={`${backend}${data.img_overview5["url"]}`} />
  137. // </td>
  138. // </tr>
  139. // <tr>
  140. // <td>
  141. // <img src={`${backend}${data.img_overview6["url"]}`} />
  142. // </td>
  143. // <td>
  144. // <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>
  145. // </td>
  146. // </tr>
  147. // <tr>
  148. // <td>
  149. // <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>
  150. // </td>
  151. // <td>
  152. // <img src={`${backend}${data.img_overview7["url"]}`} />
  153. // </td>
  154. // </tr>
  155. // <tr>
  156. // <td>
  157. // <img src={`${backend}${data.img_overview8["url"]}`} />
  158. // </td>
  159. // <td>
  160. // <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>
  161. // </td>
  162. // </tr>
  163. // <tr>
  164. // <td>
  165. // <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>
  166. // </td>
  167. // <td>
  168. // <img src={`${backend}${data.img_overview9["url"]}`} />
  169. // </td>
  170. // </tr>
  171. // <tr>
  172. // <td>
  173. // <img src={`${backend}${data.img_overview10["url"]}`} />
  174. // </td>
  175. // <td>
  176. // <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>
  177. // </td>
  178. // </tr>
  179. // </table>
  180. // </div>
  181. // </GridItem>
  182. // </div>
  183. // ),
  184. // },
  185. {
  186. tabButton: "Overview",
  187. tabIcon: Dashboard,
  188. tabContent: (
  189. <div>
  190. <GridItem className={classes.marginAuto}>
  191. <div align="center">
  192. <table>
  193. <tr>
  194. <td>
  195. <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>
  196. </td>
  197. <td>
  198. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/201912012240262893A2540.jpg"/>
  199. </td>
  200. </tr>
  201. <tr>
  202. <td>
  203. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120516484034670K42560.jpg"/>
  204. </td>
  205. <td>
  206. <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>
  207. </td>
  208. </tr>
  209. <tr>
  210. <td>
  211. <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>
  212. </td>
  213. <td>
  214. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402661202S19702.jpg"/>
  215. </td>
  216. </tr>
  217. <tr>
  218. <td>
  219. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123231136996Y5592.jpg"/>
  220. </td>
  221. <td>
  222. <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>
  223. </td>
  224. </tr>
  225. <tr>
  226. <td>
  227. <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>
  228. </td>
  229. <td>
  230. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173855561Z61407.jpg"/>
  231. </td>
  232. </tr>
  233. <tr>
  234. <td>
  235. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173867373B74912.jpg"/>
  236. </td>
  237. <td>
  238. <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>
  239. </td>
  240. </tr>
  241. <tr>
  242. <td>
  243. <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>
  244. </td>
  245. <td>
  246. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120123173831375M60860.jpg"/>
  247. </td>
  248. </tr>
  249. <tr>
  250. <td>
  251. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402691982X34635.jpg"/>
  252. </td>
  253. <td>
  254. <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>
  255. </td>
  256. </tr>
  257. <tr>
  258. <td>
  259. <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>
  260. </td>
  261. <td>
  262. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/201912012240264043F92645.jpg"/>
  263. </td>
  264. </tr>
  265. <tr>
  266. <td>
  267. <img src="https://www.yamaha-motor.co.id/uploads/products/overview/2019120122402675980Z35071.jpg"/>
  268. </td>
  269. <td>
  270. <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>
  271. </td>
  272. </tr>
  273. </table>
  274. </div>
  275. </GridItem>
  276. </div>
  277. ),
  278. },
  279. {
  280. tabButton: "Specification",
  281. tabIcon: Dashboard,
  282. tabContent: (
  283. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  284. <GridItem className={classes.marginAuto}>
  285. <div align="justify">
  286. <h2>Spesifikasi Mesin</h2>
  287. {ReactHtmlParser(data.spesifikasi_mesin)}<br/><br/>
  288. <h2>Spesifikasi Dimensi</h2>
  289. {ReactHtmlParser(data.spesifikasi_dimensi)}<br/><br/>
  290. <h2>Spesifikasi Rangka</h2>
  291. {ReactHtmlParser(data.spesifikasi_rangka)}<br/><br/>
  292. <h2>Spesifikasi Kelistrikan</h2>
  293. {ReactHtmlParser(data.spesifikasi_kelistrikan)}<br/><br/>
  294. </div>
  295. </GridItem>
  296. </GridContainer>
  297. ),
  298. },
  299. {
  300. tabButton: "Film",
  301. tabIcon: Dashboard,
  302. tabContent: (
  303. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  304. <GridItem className={classes.marginAuto}>
  305. <div align="justify">
  306. {ReactHtmlParser(data.film)}
  307. </div>
  308. </GridItem>
  309. </GridContainer>
  310. ),
  311. },
  312. ]}
  313. />
  314. </GridItem>
  315. </GridContainer>
  316. </div>
  317. );
  318. })
  319. return (
  320. <Card className={classes.textCenter}>
  321. <div align="center">
  322. <CardHeader color="info">Product Detail</CardHeader>
  323. </div>
  324. <CardBody>
  325. <div>
  326. {Productdetails}
  327. </div>
  328. </CardBody>
  329. <CardFooter className={classes.textMuted} textAlign="center">
  330. © 2020 , All Right Reserved by @Thamrin Brother Company
  331. </CardFooter>
  332. </Card>
  333. );
  334. }
  335. export default DataProduct;