|
- 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: "20px", marginTop:"-40px"}}>
- <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
- <CardBody>
- <div align="center" style={{padding:"10px"}}>
- <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
- />
- <div align="center">
- <h5>{data.name}</h5>
- <h5>Rp.{data.price}</h5>
- <Button
- color="info" round
- href={"/product/ygp_detail?s="+data.id}
- >
- <Icon className={classes.icons}>open_in_new</Icon>Detail Product
- </Button>
- </div>
- </div>
- </CardBody>
- </Card>
- </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;
|