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.
 
 

145 rivejä
5.5 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. </Grid>
  69. </GridContainer>
  70. <GridContainer justify="center">
  71. <GridItem>
  72. <NavPills
  73. color="primary"
  74. align="center"
  75. alignCenter
  76. tabs={[
  77. {
  78. tabButton: "Overview",
  79. tabIcon: Dashboard,
  80. tabContent: (
  81. <div>
  82. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  83. <GridItem className={classes.marginAuto}>
  84. <div align="justify">
  85. {ReactHtmlParser(data.overview)}
  86. </div>
  87. </GridItem>
  88. </GridContainer>
  89. </div>
  90. ),
  91. },
  92. {
  93. tabButton: "Specification",
  94. tabIcon: Dashboard,
  95. tabContent: (
  96. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  97. <GridItem className={classes.marginAuto}>
  98. <div align="justify">
  99. {ReactHtmlParser(data.specification)}
  100. </div>
  101. </GridItem>
  102. </GridContainer>
  103. ),
  104. },
  105. {
  106. tabButton: "Film",
  107. tabIcon: Dashboard,
  108. tabContent: (
  109. <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
  110. <GridItem className={classes.marginAuto}>
  111. <div align="justify">
  112. {ReactHtmlParser(data.film)}
  113. </div>
  114. </GridItem>
  115. </GridContainer>
  116. ),
  117. },
  118. ]}
  119. />
  120. </GridItem>
  121. </GridContainer>
  122. </div>
  123. );
  124. })
  125. return (
  126. <Card className={classes.textCenter}>
  127. <div align="center">
  128. <CardHeader color="info">Product Detail</CardHeader>
  129. </div>
  130. <CardBody>
  131. <div>
  132. {Productdetails}
  133. </div>
  134. </CardBody>
  135. <CardFooter className={classes.textMuted} textAlign="center">
  136. © 2020 , All Right Reserved by @Thamrin Brother Company
  137. </CardFooter>
  138. </Card>
  139. );
  140. }
  141. export default DataProduct;