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.
 
 

157 regels
5.9 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. const useStyles = makeStyles(styles);
  19. const DataProduct = function ({ backend, detailproduct, ...props }) {
  20. const classes = useStyles();
  21. const { ...rest } = props;
  22. const imageClasses = classNames(
  23. classes.imgRaised,
  24. classes.imgRoundedCircle,
  25. classes.imgFluid
  26. );
  27. const settings = {
  28. dots: true,
  29. infinite: true,
  30. speed: 500,
  31. slidesToShow: 1,
  32. slidesToScroll: 1,
  33. autoplay: true,
  34. time: 5
  35. };
  36. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  37. const Productdetails = detailproduct.map((data) => {
  38. return (
  39. <div>
  40. <GridContainer>
  41. <Grid fluid xs={5}>
  42. <div className={classes.section} id="notifications">
  43. <div className={classes.section}>
  44. <div className={classes.container}>
  45. <GridContainer>
  46. <GridItem className={classes.marginAuto}>
  47. <Card carousel>
  48. <Carousel {...settings}>
  49. <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
  50. </Carousel>
  51. </Card>
  52. {/* <Button color="info" round href={"/product_detail?s="+data.id}>
  53. <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
  54. </Button> */}
  55. </GridItem>
  56. </GridContainer>
  57. </div>
  58. </div>
  59. </div>
  60. </Grid>
  61. <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
  62. <h3>{data.name}</h3>
  63. <h3>Rp.{data.price} - Stock Unit : {data.stock}</h3>
  64. <hr></hr>
  65. <div align="justify">
  66. <p>{ReactHtmlParser(data.description)}</p>
  67. </div>
  68. {/* <GridContainer>
  69. <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
  70. <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
  71. <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424212835Z1732.png"/>
  72. </Card>
  73. </Grid>
  74. <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
  75. <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
  76. <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424235104F62455.png"/>
  77. </Card>
  78. </Grid>
  79. </GridContainer> */}
  80. </Grid>
  81. </GridContainer>
  82. <GridContainer justify="center">
  83. <GridItem>
  84. <NavPills
  85. color="primary"
  86. align="center"
  87. alignCenter
  88. tabs={[
  89. {
  90. tabButton: "Overview",
  91. tabIcon: Dashboard,
  92. tabContent: (
  93. <div>
  94. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  95. <GridItem className={classes.marginAuto}>
  96. <div align="justify">
  97. {ReactHtmlParser(data.overview)}
  98. </div>
  99. </GridItem>
  100. </GridContainer>
  101. </div>
  102. ),
  103. },
  104. {
  105. tabButton: "Specification",
  106. tabIcon: Dashboard,
  107. tabContent: (
  108. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  109. <GridItem className={classes.marginAuto}>
  110. <div align="justify">
  111. {ReactHtmlParser(data.specification)}
  112. </div>
  113. </GridItem>
  114. </GridContainer>
  115. ),
  116. },
  117. {
  118. tabButton: "Film",
  119. tabIcon: Dashboard,
  120. tabContent: (
  121. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  122. <GridItem className={classes.marginAuto}>
  123. <div align="justify">
  124. {ReactHtmlParser(data.film)}
  125. </div>
  126. </GridItem>
  127. </GridContainer>
  128. ),
  129. },
  130. ]}
  131. />
  132. </GridItem>
  133. </GridContainer>
  134. </div>
  135. );
  136. })
  137. return (
  138. <Card className={classes.textCenter}>
  139. <div align="center">
  140. <CardHeader color="info">Product Detail</CardHeader>
  141. </div>
  142. <CardBody>
  143. <div>
  144. {Productdetails}
  145. </div>
  146. </CardBody>
  147. <CardFooter className={classes.textMuted} textAlign="center">
  148. © 2020 , All Right Reserved by @Thamrin Brother Company
  149. </CardFooter>
  150. </Card>
  151. );
  152. }
  153. export default DataProduct;