Você não pode selecionar mais de 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.
 
 

95 linhas
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. import NumberFormat from 'react-number-format';
  16. import { Motorcycle } from "@material-ui/icons";
  17. const useStyles = makeStyles(styles);
  18. const DataProduct = function ({ backend, car, ...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 ProductSuzuki = car.map((data) => {
  28. return (
  29. <div style={{padding: "20px", marginTop:"-40px"}}>
  30. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  31. <CardBody>
  32. <div style={{padding:"10px"}}>
  33. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  34. />
  35. <div align="center">
  36. <h5>{data.name}</h5>
  37. <h5>
  38. <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
  39. </h5>
  40. <Button
  41. color="info" round
  42. href={"/suzuki/product/product_detail?s="+data.id}
  43. >
  44. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  45. </Button>
  46. <Button
  47. color="info" round
  48. href={"/suzuki/cart/checkout?s="+data.id}
  49. >
  50. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  51. </Button>
  52. </div>
  53. </div>
  54. </CardBody>
  55. </Card>
  56. </div>
  57. );
  58. })
  59. return (
  60. <Card className={classes.textCenter}>
  61. <div align="center">
  62. <CardHeader color="info">Product</CardHeader>
  63. </div>
  64. <CardBody>
  65. <div align="center">
  66. <h2>Product & Facilities</h2>
  67. </div>
  68. <GridContainer justify="center">
  69. <GridItem>
  70. <NavPills
  71. alignCenter
  72. color="primary"
  73. tabs={[
  74. {
  75. tabButton: "XL7",
  76. tabIcon: Motorcycle,
  77. tabContent: (
  78. <GridContainer justify="center">
  79. {ProductSuzuki}
  80. </GridContainer>
  81. ),
  82. },
  83. ]}
  84. />
  85. </GridItem>
  86. </GridContainer>
  87. </CardBody>
  88. </Card>
  89. );
  90. }
  91. export default DataProduct;