tbg-ecomm-nextjs/pages-sections/product/ygp.js

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

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

const useStyles = makeStyles(styles);

const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const ProductYGP = ygp.map((data) => {
        return (      
            <div style={{padding:"50px"}} align="center">
                <img
                    alt="..."
                    style={{ height: "150px", width:"250px", display: "block" }}
                    src={`${backend}${data.img["url"]}`}
                    className={navImageClasses}
                />
                <h4>{data.name}</h4>
                <h4>Rp.{data.price}</h4>
                <Button color="info" round href={"/product/ygp_details?s="+data.id}>
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
            </div>
        );
    })
    return (
        <div>
        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
            <CardBody>
                <div align="center" style={{marginTop:"-50px"}}>
                    <h2>Yamaha Geniue Part</h2>
                    <Select
                        value={(selected)?ygp.filter((i)=>i.id==selected):null} 
                        getOptionLabel={option => `${option.name} ${option.part_code}`}
                        getOptionValue={option => option.id}
                        options={ygp}
                        isMulti
                        instanceId="name"
                        placeholder="filter by Nama Part"
                        onChange={values => handleName(values)}
                    />
                    <br></br>
                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                        {ProductYGP}
                    </GridContainer>
                </div> 
            </CardBody>
        </Card>
        </div>
    );
}

export default DataYGP;