{"size": 1641, "ext": "js", "max_stars_repo_path": "client/src/component/product_list/productlist.js", "max_stars_repo_name": "shyambhongle/racoon-cart", "max_stars_repo_stars_event_min_datetime": "2019-08-01T09:15:52.000Z", "max_stars_repo_stars_event_max_datetime": "2019-08-01T09:15:52.000Z", "max_issues_repo_path": "client/src/component/product_list/productlist.js", "max_issues_repo_name": "shyambhongle/racoon-cart", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/component/product_list/productlist.js", "max_forks_repo_name": "shyambhongle/racoon-cart", "max_forks_repo_forks_event_min_datetime": "2020-01-11T09:52:14.000Z", "max_forks_repo_forks_event_max_datetime": "2020-01-11T09:52:14.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 35.6739130435, "max_line_length": 171, "alphanum_fraction": 0.5984156002}
import React from 'react';
import styles from './productlist.module.css';

import Minus from './../../assets/icons/minus.svg';
import Plus from './../../assets/icons/plus.svg';

const ProductList=(props)=>{
  let finalStyle={
    marginLeft:"25%",
    marginRight:"2%"
  }
  return(
    <div className={styles.ListContainer}>
      <div className={styles.InfoContainer}>
        <div className={styles.Image}>
          <img src={props.sync.image} alt="list profuct"/>
        </div>
        <div className={styles.Details}>
          <div className={styles.Discount}>
            <p>{Math.round(props.sync.discount)}% OFF</p>
            <span onClick={props.remove} style={{"display":props.visible && "none"}}
              className={styles.Close}></span>
          </div>
          <div className={styles.Title}>
            {props.sync.title}</div>
          <div className={styles.Qty}>{props.sync.weight}</div>
        </div>
      </div>
      <div className={styles.Amount}>
        <span className={styles.plus} style={{"display":props.visible && "none"}} onClick={props.sync.qty===1?props.remove:props.dic}><img src={Minus} alt="minus"/></span>
        <span className={styles.num} style={props.visible?finalStyle:{}}>
          {props.sync.qty}</span>
        <span className={styles.plus} style={{"display":props.visible && "none"}}
          onClick={props.inc}><img src={Plus} alt="plus"/></span>
        <span className={styles.Multiply}>x {props.sync.dprice}</span>
        <span className={styles.TotalPrice}>&#8360; {props.sync.dprice * props.sync.qty}</span>
      </div>
    </div>
  )
}




export default ProductList;
