text: import {Card,Button} from 'react-bootstrap';
  import React, { useContext }   from 'react';
  import {ShopContext} from '../../ShopContext';
  import  './productsList.css';
  
  
  const ProductsList = () => {
     
      const {shop,addToBasket} = useContext(ShopContext);
     
     
      
      return (       
          <div className="product-list row justify-content-left" style={{ display:'flex', flex: 1, flexDirection: "row" }}>  
         
          {           
          shop.categoryProducts.map(p=>(
              <Card key={p.id} id="product">            
               <Card.Body>
                <Card.Title>{p.name}</Card.Title>
                <Card.Text>
                 {p.description}
                </Card.Text>
                <Button variant="primary" onClick={()=>addToBasket(p.id,p.name)}>Add</Button>
              </Card.Body>
            </Card>
          ))}        
  
         
          </div>       
           
       );
  
  }
  export default ProductsList;
  