Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

82 рядки
3.1 KiB

  1. import React from "react";
  2. import { makeStyles } from "@material-ui/core/styles";
  3. import Select from 'react-select';
  4. import GridContainer from "components/Grid/GridContainer.js";
  5. import Grid from '@material-ui/core/Grid';
  6. import Card from "components/Card/Card.js";
  7. import CardBody from "components/Card/CardBody.js";
  8. import CardHeader from "components/Card/CardHeader.js";
  9. import Quote from "components/Typography/Quote.js"
  10. import Icon from "@material-ui/core/Icon";
  11. import Button from "components/CustomButtons/Button.js";
  12. import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
  13. const useStyles = makeStyles(styles);
  14. const DataDealer = function ({ backend, dealers, ...props }) {
  15. const classes = useStyles();
  16. // const handleKotaDealer = value => {
  17. // console.log(value)
  18. // }
  19. const handleName = values => {
  20. console.log(values)
  21. }
  22. const Dealers = dealers.map((data) => {
  23. return (
  24. <div>
  25. <Grid style={{width:"400px", padding:"30px"}}>
  26. <Card>
  27. <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
  28. <CardBody>
  29. <Quote
  30. text={data.kota_dealer}
  31. author={data.address}
  32. />
  33. <Quote
  34. text={data.telp}
  35. author={data.email}
  36. />
  37. <div align="center">
  38. <Button color="danger" round href={data.location} target="_blank">
  39. <Icon className={classes.icons}>room</Icon>View Location
  40. </Button>
  41. </div>
  42. </CardBody>
  43. </Card>
  44. </Grid>
  45. </div>
  46. );
  47. })
  48. return (
  49. <div className={classes.section} id="notifications">
  50. <div align="center">
  51. <h2>Dealers & Service</h2>
  52. </div>
  53. <Select
  54. getOptionLabel={option => `${option.name} ${option.kota_dealer}`}
  55. getOptionValue={option => option.id}
  56. options={dealers}
  57. instanceId="name"
  58. placeholder="filter by Nama Dealer"
  59. onChange={values => handleName(values)}
  60. />
  61. <br></br>
  62. {/* <Select
  63. getOptionLabel={option => `${option.kota_dealer} ${option.kota_dealer}`}
  64. getOptionValue={option => option.id}
  65. options={dealers}
  66. instanceId="kota_dealer"
  67. placeholder="filter by Kota Dealer"
  68. onChange={value => handleKotaDealer(value.map(kota_dealer => kota_dealer.id))}
  69. /> */}
  70. <div>
  71. <GridContainer justify="center">
  72. {Dealers}
  73. </GridContainer>
  74. </div>
  75. </div>
  76. );
  77. }
  78. export default DataDealer;