Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 

115 rindas
3.6 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 GridItem from "components/Grid/GridItem.js";
  12. import NavPills from "components/NavPills/NavPills.js";
  13. import Card from "components/Card/Card.js";
  14. import CardBody from "components/Card/CardBody.js";
  15. import CardHeader from "components/Card/CardHeader.js";
  16. import CardFooter from "components/Card/CardFooter.js";
  17. import Button from "components/CustomButtons/Button.js";
  18. import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
  19. const useStyles = makeStyles(styles);
  20. const DataProduct = function ({ backend, product, ...props }) {
  21. const classes = useStyles();
  22. const { ...rest } = props;
  23. const imageClasses = classNames(
  24. classes.imgRaised,
  25. classes.imgRoundedCircle,
  26. classes.imgFluid
  27. );
  28. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  29. const Product = product.map((data) => {
  30. console.log(data);
  31. return (
  32. <div>
  33. <img
  34. alt="..."
  35. style={{ height: "350px", display: "block" }}
  36. src={`${backend}${data.img[0]["url"]}`}
  37. className={navImageClasses}
  38. />
  39. <div align="center">
  40. <h3><a href={"/product_detail?a="+data.id}>{data.name}</a></h3>
  41. <h4>Rp.{data.price}</h4>
  42. <Button color="info" round>
  43. <LocalGroceryStoreIcon className={classes.icons} />{" "}
  44. Buy
  45. </Button>
  46. </div>
  47. </div>
  48. );
  49. })
  50. return (
  51. <Card className={classes.textCenter}>
  52. <div align="center">
  53. <CardHeader color="info">Product</CardHeader>
  54. </div>
  55. <CardBody>
  56. <div align="center">
  57. <h2>Product & Facilities</h2>
  58. </div>
  59. <GridContainer justify="center">
  60. <GridItem>
  61. <NavPills
  62. alignCenter
  63. color="primary"
  64. tabs={[
  65. {
  66. tabButton: "Yamaha",
  67. tabIcon: Dashboard,
  68. tabContent: (
  69. <GridContainer justify="center">
  70. {Product}
  71. </GridContainer>
  72. ),
  73. },
  74. {
  75. tabButton: "Suzuki",
  76. tabIcon: Dashboard,
  77. tabContent: (
  78. <GridContainer justify="center">
  79. {Product}
  80. </GridContainer>
  81. ),
  82. },
  83. {
  84. tabButton: "Honda",
  85. tabIcon: Dashboard,
  86. tabContent: (
  87. <GridContainer justify="center">
  88. </GridContainer>
  89. ),
  90. },
  91. {
  92. tabButton: "Mercedes Benz",
  93. tabIcon: Dashboard,
  94. tabContent: (
  95. <GridContainer justify="center">
  96. </GridContainer>
  97. ),
  98. },
  99. ]}
  100. />
  101. </GridItem>
  102. </GridContainer>
  103. </CardBody>
  104. </Card>
  105. );
  106. }
  107. export default DataProduct;