tbg-ecomm-nextjs/pages-sections/yamaha/dealers/dealers.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Select from 'react-select';

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Quote from "components/Typography/Quote.js"
import Icon from "@material-ui/core/Icon";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);
const DataDealer = function ({ selected, handleName, backend, dealers, ...props })  {
    const classes = useStyles();

    const Dealers = dealers.map((data) => {
        return (
            <Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
                <Card style={{width: "20rem"}}>
                    <img
                    style={{height: "180px", width: "100%", display: "block"}}
                    className={classes.imgCardTop}
                    src={`${backend}${data.img["url"]}`}
                    />
                    <CardBody>
                    <p><b>{data.name}</b></p>
                    <p><b>{data.kota_dealer}</b></p>
                    <p><b>{data.telp}</b></p>
                    <p><b>{data.address}</b></p>
                    <div align="center">
                        <Button color="info" round href={data.location} target="_blank">
                            <Icon className={classes.icons}>room</Icon>View Location
                        </Button>
                    </div>
                    </CardBody>
                </Card>
            </Grid>
            );
        })
        return (
        <div>
            <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
                <CardBody>
                <div align="center" style={{marginTop:"-50px"}}>
                    <h2><b>Yamaha Dealers</b></h2>
                    <Select
                        value={(selected)?dealers.filter((i)=>i.id==selected):null}
                        getOptionLabel={option => `${option.name}`}
                        getOptionValue={option => option.id}
                        options={dealers}
                        isMulti
                        instanceId="name"
                        placeholder="Cari Dealer"
                        onChange={values => handleName(values)}
                    />
                    <br></br>
                    <GridContainer justify="center">
                        {Dealers}
                    </GridContainer>
                </div>
                </CardBody>
            </Card>
        </div>
    );
}

export default DataDealer;