Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 

128 linhas
4.3 KiB

  1. import React from "react";
  2. import classNames from "classnames";
  3. import { makeStyles } from "@material-ui/core/styles";
  4. import Dashboard from "@material-ui/icons/Dashboard";
  5. import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
  6. import GridContainer from "components/Grid/GridContainer.js";
  7. import Grid from '@material-ui/core/Grid';
  8. import GridItem from "components/Grid/GridItem.js";
  9. import NavPills from "components/NavPills/NavPills.js";
  10. import Card from "components/Card/Card.js";
  11. import CardBody from "components/Card/CardBody.js";
  12. import CardHeader from "components/Card/CardHeader.js";
  13. import CardFooter from "components/Card/CardFooter.js";
  14. import Button from "components/CustomButtons/Button.js";
  15. import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
  16. import Carousel from "react-slick";
  17. const useStyles = makeStyles(styles);
  18. const DataProduct = function ({ backend, detailproduct, ...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 Productdetails = detailproduct.map((data) => {
  28. return (
  29. <div>
  30. <GridContainer>
  31. <Grid>
  32. <div className={classes.section}>
  33. <div className={classes.container}>
  34. <Card style={{width:"700px", height:"400px"}}>
  35. <div>
  36. <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
  37. </div>
  38. </Card>
  39. </div>
  40. </div>
  41. </Grid>
  42. <Grid style={{padding:"40px", marginTop:"-30px"}}>
  43. <h3>{data.name}</h3>
  44. <h3>Rp.{data.price}</h3>
  45. <hr></hr>
  46. <p>{data.description} ---- Stock Unit : {data.stock}</p>
  47. </Grid>
  48. </GridContainer>
  49. <GridContainer justify="center">
  50. <GridItem>
  51. <NavPills
  52. color="primary"
  53. align="center"
  54. alignCenter
  55. tabs={[
  56. {
  57. tabButton: "Overview",
  58. tabIcon: Dashboard,
  59. tabContent: (
  60. <GridContainer justify="center">
  61. <GridItem>
  62. {data.overview}
  63. </GridItem>
  64. </GridContainer>
  65. ),
  66. },
  67. {
  68. tabButton: "Specification",
  69. tabIcon: Dashboard,
  70. tabContent: (
  71. <GridContainer justify="center">
  72. <GridItem>
  73. {data.specification}
  74. </GridItem>
  75. </GridContainer>
  76. ),
  77. },
  78. {
  79. tabButton: "Accessories",
  80. tabIcon: Dashboard,
  81. tabContent: (
  82. <GridContainer justify="center">
  83. <GridItem>
  84. {data.accessories}
  85. </GridItem>
  86. </GridContainer>
  87. ),
  88. },
  89. {
  90. tabButton: "Film",
  91. tabIcon: Dashboard,
  92. tabContent: (
  93. <GridContainer justify="center">
  94. <GridItem>
  95. <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
  96. </GridItem>
  97. </GridContainer>
  98. ),
  99. },
  100. ]}
  101. />
  102. </GridItem>
  103. </GridContainer>
  104. </div>
  105. );
  106. })
  107. return (
  108. <Card className={classes.textCenter}>
  109. <div align="center">
  110. <CardHeader color="info">Product Detail</CardHeader>
  111. </div>
  112. <CardBody>
  113. <div>
  114. {Productdetails}
  115. </div>
  116. </CardBody>
  117. <CardFooter className={classes.textMuted} textAlign="center">
  118. © 2020 , All Right Reserved by @Thamrin Brother Company
  119. </CardFooter>
  120. </Card>
  121. );
  122. }
  123. export default DataProduct;