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

91 行
3.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 GridContainer from "components/Grid/GridContainer.js";
  6. import GridItem from "components/Grid/GridItem.js";
  7. import NavPills from "components/NavPills/NavPills.js";
  8. import Card from "components/Card/Card.js";
  9. import CardBody from "components/Card/CardBody.js";
  10. import CardHeader from "components/Card/CardHeader.js";
  11. import CardFooter from "components/Card/CardFooter.js";
  12. import Button from "components/CustomButtons/Button.js";
  13. import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
  14. import Icon from "@material-ui/core/Icon";
  15. const useStyles = makeStyles(styles);
  16. const DataProduct = function ({ backend, car, ...props }) {
  17. const classes = useStyles();
  18. const { ...rest } = props;
  19. const imageClasses = classNames(
  20. classes.imgRaised,
  21. classes.imgRoundedCircle,
  22. classes.imgFluid
  23. );
  24. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  25. const ProductSuzuki = car.map((data) => {
  26. return (
  27. <div style={{padding: "20px", marginTop:"-40px"}}>
  28. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  29. <CardBody>
  30. <div style={{padding:"10px"}}>
  31. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  32. />
  33. <div align="center">
  34. <h5>{data.name}</h5>
  35. <h5>Rp.{data.price}</h5>
  36. <Button
  37. color="info" round
  38. href={"/honda/product/product_details?s="+data.id}
  39. >
  40. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  41. </Button>
  42. <Button
  43. color="info" round
  44. href={"/honda/checkout/checkout?s="+data.id}
  45. >
  46. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  47. </Button>
  48. </div>
  49. </div>
  50. </CardBody>
  51. </Card>
  52. </div>
  53. );
  54. })
  55. return (
  56. <Card className={classes.textCenter}>
  57. <div align="center">
  58. <CardHeader color="info">Product</CardHeader>
  59. </div>
  60. <CardBody>
  61. <div align="center">
  62. <h2>Product & Facilities</h2>
  63. </div>
  64. <GridContainer justify="center">
  65. <GridItem>
  66. <NavPills
  67. alignCenter
  68. color="primary"
  69. tabs={[
  70. {
  71. tabButton: "Brio",
  72. tabIcon: Dashboard,
  73. tabContent: (
  74. <GridContainer justify="center">
  75. {ProductSuzuki}
  76. </GridContainer>
  77. ),
  78. },
  79. ]}
  80. />
  81. </GridItem>
  82. </GridContainer>
  83. </CardBody>
  84. </Card>
  85. );
  86. }
  87. export default DataProduct;