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.
 
 

247 regels
10 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. const classes = useStyles();
  22. const { ...rest } = props;
  23. const imageClasses = classNames(
  24. classes.imgRaised,
  25. classes.imgRoundedCircle,
  26. classes.imgFluid
  27. );
  28. const settings = {
  29. dots: true,
  30. infinite: true,
  31. speed: 500,
  32. slidesToShow: 1,
  33. slidesToScroll: 1,
  34. autoplay: true,
  35. time: 5
  36. };
  37. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  38. const Productdetails = detailproduct.map((data) => {
  39. return (
  40. <div>
  41. <GridContainer>
  42. <Grid fluid xs={5}>
  43. <div className={classes.section} id="notifications">
  44. <div className={classes.section}>
  45. <div className={classes.container}>
  46. <GridContainer>
  47. <GridItem className={classes.marginAuto}>
  48. <Card carousel>
  49. <Carousel {...settings}>
  50. <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
  51. </Carousel>
  52. </Card>
  53. {/* <Button color="info" round href={"/product_detail?s="+data.id}>
  54. <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
  55. </Button> */}
  56. </GridItem>
  57. </GridContainer>
  58. </div>
  59. </div>
  60. </div>
  61. </Grid>
  62. <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
  63. <h3>{data.name}</h3>
  64. <h3><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> - Stock Unit : {data.stock}</h3>
  65. <hr></hr>
  66. <div align="justify">
  67. <p>{ReactHtmlParser(data.description)}</p>
  68. </div>
  69. {/* <GridContainer>
  70. <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
  71. <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
  72. <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424212835Z1732.png"/>
  73. </Card>
  74. </Grid>
  75. <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
  76. <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
  77. <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424235104F62455.png"/>
  78. </Card>
  79. </Grid>
  80. </GridContainer> */}
  81. </Grid>
  82. </GridContainer>
  83. <GridContainer justify="center">
  84. <GridItem>
  85. <NavPills
  86. color="primary"
  87. align="center"
  88. alignCenter
  89. tabs={[
  90. {
  91. tabButton: "Overview",
  92. tabIcon: Dashboard,
  93. tabContent: (
  94. <div>
  95. <GridItem className={classes.marginAuto}>
  96. <div align="justify">
  97. <table>
  98. <tr>
  99. <td>
  100. <h4><b>{ReactHtmlParser(data.overview1)}</b></h4>
  101. </td>
  102. <td>
  103. <img src={`${backend}${data.img_overview1["url"]}`} />
  104. </td>
  105. </tr>
  106. <tr>
  107. <td>
  108. <img src={`${backend}${data.img_overview2["url"]}`} />
  109. </td>
  110. <td>
  111. <h4><b>{ReactHtmlParser(data.overview2)}</b></h4>
  112. </td>
  113. </tr>
  114. <tr>
  115. <td>
  116. <h4><b>{ReactHtmlParser(data.overview3)}</b></h4>
  117. </td>
  118. <td>
  119. <img src={`${backend}${data.img_overview3["url"]}`} />
  120. </td>
  121. </tr>
  122. <tr>
  123. <td>
  124. <img src={`${backend}${data.img_overview4["url"]}`} />
  125. </td>
  126. <td>
  127. <h4><b>{ReactHtmlParser(data.overview4)}</b></h4>
  128. </td>
  129. </tr>
  130. <tr>
  131. <td>
  132. <h4><b>{ReactHtmlParser(data.overview5)}</b></h4>
  133. </td>
  134. <td>
  135. <img src={`${backend}${data.img_overview5["url"]}`} />
  136. </td>
  137. </tr>
  138. <tr>
  139. <td>
  140. <img src={`${backend}${data.img_overview6["url"]}`} />
  141. </td>
  142. <td>
  143. <h4><b>{ReactHtmlParser(data.overview6)}</b></h4>
  144. </td>
  145. </tr>
  146. <tr>
  147. <td>
  148. <h4><b>{ReactHtmlParser(data.overview7)}</b></h4>
  149. </td>
  150. <td>
  151. <img src={`${backend}${data.img_overview7["url"]}`} />
  152. </td>
  153. </tr>
  154. <tr>
  155. <td>
  156. <img src={`${backend}${data.img_overview8["url"]}`} />
  157. </td>
  158. <td>
  159. <h4><b>{ReactHtmlParser(data.overview8)}</b></h4>
  160. </td>
  161. </tr>
  162. <tr>
  163. <td>
  164. <h4><b>{ReactHtmlParser(data.overview9)}</b></h4>
  165. </td>
  166. <td>
  167. <img src={`${backend}${data.img_overview9["url"]}`} />
  168. </td>
  169. </tr>
  170. <tr>
  171. <td>
  172. <img src={`${backend}${data.img_overview10["url"]}`} />
  173. </td>
  174. <td>
  175. <h4><b>{ReactHtmlParser(data.overview10)}</b></h4>
  176. </td>
  177. </tr>
  178. </table>
  179. </div>
  180. </GridItem>
  181. </div>
  182. ),
  183. },
  184. {
  185. tabButton: "Specification",
  186. tabIcon: Dashboard,
  187. tabContent: (
  188. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  189. <GridItem className={classes.marginAuto}>
  190. <div align="justify">
  191. <h2>Spesifikasi Mesin</h2>
  192. {ReactHtmlParser(data.spesifikasi_mesin)}<br/><br/>
  193. <h2>Spesifikasi Dimensi</h2>
  194. {ReactHtmlParser(data.spesifikasi_dimensi)}<br/><br/>
  195. <h2>Spesifikasi Rangka</h2>
  196. {ReactHtmlParser(data.spesifikasi_rangka)}<br/><br/>
  197. <h2>Spesifikasi Kelistrikan</h2>
  198. {ReactHtmlParser(data.spesifikasi_kelistrikan)}<br/><br/>
  199. </div>
  200. </GridItem>
  201. </GridContainer>
  202. ),
  203. },
  204. {
  205. tabButton: "Film",
  206. tabIcon: Dashboard,
  207. tabContent: (
  208. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  209. <GridItem className={classes.marginAuto}>
  210. <div align="justify">
  211. {ReactHtmlParser(data.film)}
  212. </div>
  213. </GridItem>
  214. </GridContainer>
  215. ),
  216. },
  217. ]}
  218. />
  219. </GridItem>
  220. </GridContainer>
  221. </div>
  222. );
  223. })
  224. return (
  225. <Card className={classes.textCenter}>
  226. <div align="center">
  227. <CardHeader color="info">Product Detail</CardHeader>
  228. </div>
  229. <CardBody>
  230. <div>
  231. {Productdetails}
  232. </div>
  233. </CardBody>
  234. <CardFooter className={classes.textMuted} textAlign="center">
  235. © 2020 , All Right Reserved by @Thamrin Brother Company
  236. </CardFooter>
  237. </Card>
  238. );
  239. }
  240. export default DataProduct;