您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 

142 行
4.4 KiB

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