選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

86 行
3.4 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. const useStyles = makeStyles(styles);
  18. const DetailDataYGP = function ({ backend, detailygp, ...props }) {
  19. const classes = useStyles();
  20. const { ...rest } = props;
  21. const imageClasses = classNames(
  22. classes.imgRaised,
  23. classes.imgRoundedCircle,
  24. classes.imgFluid
  25. );
  26. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  27. const YGPdetails = detailygp.map((data) => {
  28. return (
  29. <div>
  30. <GridContainer>
  31. <Grid fluid xs={5}>
  32. <div className={classes.section} id="notifications">
  33. <div className={classes.section}>
  34. <div className={classes.container}>
  35. <GridContainer>
  36. <GridItem className={classes.marginAuto}>
  37. <Card>
  38. <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img["url"]}`} />
  39. </Card>
  40. </GridItem>
  41. </GridContainer>
  42. </div>
  43. </div>
  44. </div>
  45. </Grid>
  46. <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
  47. <h3>{data.name}</h3>
  48. <h3>Rp.{data.price}</h3>
  49. <hr></hr>
  50. <ul>
  51. <li><h4>Stock : {data.stock}</h4></li>
  52. <li><h4>Part Code : {data.part_code}</h4></li>
  53. </ul>
  54. </Grid>
  55. </GridContainer>
  56. <div align="center">
  57. <hr></hr>
  58. <h2>Deskripsi</h2>
  59. </div>
  60. <div align="justify">
  61. <p>{ReactHtmlParser(data.description)}</p>
  62. </div>
  63. </div>
  64. );
  65. })
  66. return (
  67. <Card className={classes.textCenter}>
  68. <div align="center">
  69. <CardHeader color="info">Product Detail</CardHeader>
  70. </div>
  71. <CardBody>
  72. <div>
  73. {YGPdetails}
  74. </div>
  75. </CardBody>
  76. <CardFooter className={classes.textMuted} textAlign="center">
  77. © 2020 , All Right Reserved by @Thamrin Brother Company
  78. </CardFooter>
  79. </Card>
  80. );
  81. }
  82. export default DetailDataYGP;