Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 

73 wiersze
2.7 KiB

  1. import React from "react";
  2. import classNames from "classnames";
  3. import { makeStyles } from "@material-ui/core/styles";
  4. import Select from 'react-select';
  5. import Button from "components/CustomButtons/Button.js";
  6. import Icon from "@material-ui/core/Icon";
  7. import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
  8. import Card from "components/Card/Card.js";
  9. import CardBody from "components/Card/CardBody.js";
  10. import GridContainer from "components/Grid/GridContainer.js";
  11. const useStyles = makeStyles(styles);
  12. const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }) {
  13. const classes = useStyles();
  14. const { ...rest } = props;
  15. const imageClasses = classNames(
  16. classes.imgRaised,
  17. classes.imgRoundedCircle,
  18. classes.imgFluid
  19. );
  20. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  21. const ProductHelmet = helmet.map((data) => {
  22. return (
  23. <div style={{padding:"40px"}}>
  24. <img
  25. alt="..."
  26. style={{ height: "150px", display: "block" }}
  27. src={`${backend}${data.img["url"]}`}
  28. className={navImageClasses}
  29. />
  30. <div align="center">
  31. <h3>{data.name}</h3>
  32. <h4>Rp.{data.price}</h4>
  33. <Button
  34. color="info" round
  35. href={"/product/helmet_details?s="+data.id}
  36. >
  37. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  38. </Button>
  39. </div>
  40. </div>
  41. );
  42. })
  43. return (
  44. <div>
  45. <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
  46. <CardBody>
  47. <div align="center" style={{marginTop:"-50px"}}>
  48. <h2>Yamaha Helmet</h2>
  49. <Select
  50. value={(selected)?helmet.filter((i)=>i.id==selected):null}
  51. getOptionLabel={option => `${option.name}`}
  52. getOptionValue={option => option.id}
  53. options={helmet}
  54. isMulti
  55. instanceId="name"
  56. placeholder="filter by Nama Part"
  57. onChange={values => handleName(values)}
  58. />
  59. <br></br>
  60. <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
  61. {ProductHelmet}{ProductHelmet}{ProductHelmet}
  62. </GridContainer>
  63. </div>
  64. </CardBody>
  65. </Card>
  66. </div>
  67. );
  68. }
  69. export default DataHelmet;