<repo_name>marcsi19/macaron<file_sep>/src/components/cartItem.js
import React from 'react'

const cartItem = (props) => {

  const { product, removeFromCart } = props
  return (
    <div key={product.id}>
      <div className="cart_product_main" >
        <div className="cart_product_img">
          <img src={product.image} alt="product" />
        </div>
        <div className="cart_product_description">
          <h3>{product.title}</h3>
          <h4>{product.subTitle}</h4>
          <button onClick={() => removeFromCart(product.id)}>Remove</button>
        </div>
        <div className="cart_product_price">${product.price}</div>
      </div>
    </div>
  )
}

export default cartItem
<file_sep>/src/components/cart.js
import React from 'react'
import CartItem from './cartItem'


const Cart = (props) => {
  let { cart, showCart, showingCart, removeFromCart } = props

  return (
    <div className="wrapper" id="wrapper">
      <div>
        <button onClick={showingCart} className="cart_close_button">Close</button>
      </div>
      <h2>My Cart</h2>
      < div > {cart.map(product => {
        return (
          <CartItem product={product} removeFromCart={removeFromCart} key={product.id} />
        )
      })}</div >
      <div className="cart_total">Total </div> <div className="cart_total_amount"> ${cart.reduce(((acc, currVal) =>
        acc + (currVal.quantity * currVal.price)), 0).toFixed(2)}</div>
      <button className="checkout_btn">Continue to Checkout</button>
    </div >

  )
}


export default Cart
<file_sep>/src/components/data.js
const menuItems = [{
  id: 1,
  title: 'Custom Gift Box',
  subTitle: 'Assorted Flavors',
  description: `This 16 piece gift box is perfect for birthdays, anniversaries or just for yourself! Customize your flavors or pick from our three gift boxes! \n
  We offer pre-packed Citrus, Floral or Classic themed boxes. We offer next day delivery for free with all custom gift boxes!`,
  price: 55,
  quantity: 0,
  image: require('../img/custom_gift_box.png'),
  buttonText: "+ Add to Cart"
},
{
  id: 2,
  title: 'Vanilla Earl Grey Macaron',
  subTitle: '1 Piece',
  description: `Our most popular flavor! Each macaron is filled with earl grey ganache.`,
  price: 3.75,
  quantity: 0,
  image: require('../img/vanilla.png'),
  buttonText: "+ Add to Cart"
},
{
  id: 3,
  title: 'Rose Macarons',
  subTitle: '1 Piece',
  description: `Our most romatic flavor! Filled with the lightest, sweetest rose ganache, this macaron will definitely be a pleasant surprise.`,
  price: 3.75,
  quantity: 0,
  image: require('../img/rose.png'),
  buttonText: "+ Add to Cart"
}]

export default menuItems
<file_sep>/src/components/footer.js
import React, { Component } from 'react'
import facebook from '../img/facebook_icon.svg'
import twitter from '../img/twitter_icon.svg'
import instagram from '../img/instagram_icon.svg'

class Footer extends Component {
  render() {
    return (
      <div className="footer_main">
        <div className="footer_left">
          <h3>We are committed to serving the freshest, most delightful treats.</h3>
          <div className="footer_media">
            <img src={facebook} alt="facebook" />
            <img src={twitter} alt="twitter" />
            <img src={instagram} alt="instagram" />
          </div>
          <p>© 2019 MACARONS</p>
        </div>
        <div className="footer_right">
          <div>
            <h4>Company</h4>
            <ul>
              <li>About</li>
              <li>Locations</li>
              <li>Contact us</li>
            </ul>
          </div>
          <div>
            <h4>Orders</h4>
            <ul>
              <li>Order Tracker</li>
              <li>Delivery FAQ</li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

export default Footer
<file_sep>/src/components/menu.js
import React, { Component } from 'react'
import Product from './product'

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
    this.toggle = this.toggle.bind(this)
  }

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }
  render() {
    let { menuItems, addToCart, buttonText } = this.props


    return (
      <div className="menu_main">
        <h3>Menu</h3>
        <div >
          {menuItems.map(product => {
            return (
              <Product product={product} key={product.id} addToCart={addToCart} buttonText={buttonText} toggle={this.toggle} open={this.state.open} />
            )
          }
          )}

        </div>

      </div>
    )
  }
}

export default Menu;


<file_sep>/src/components/navbar.js
import React from 'react'
import { Link } from 'react-router-dom'
import logo from '../img/logo.svg'
import cartIcon from '../img/cart_icon.svg'

const Navbar = (props) => {

  let quantity = props.quantity
  return (
    <div>
      <nav className="navbar_main">
        <Link to='/' className="navbar_logo"> <img
          src={logo}
          alt="Cart"
          height="22px"
        /></Link>
        <Link to="/menu" className="navbar_menu">Menu</Link>
        <Link to="/beverages" className="navbar_menu">Beverages</Link>
        <Link to="/gifts" className="navbar_menu">Gifts</Link>
        <span className="navbar_menu">|</span>
        <span><img
          src={cartIcon}
          alt="Cart"
          className='cart_svg'
        /></span>
        <button className="cart_nav navbar_menu" onClick={props.showingCart}>
          <span className={quantity ? "cart_circle" : "cart_circle_empty"}>{quantity ? quantity : ""}</span>
          Cart</button>
      </nav>
    </div>
  )

}

export default Navbar;
<file_sep>/src/components/product.js
import React from 'react'


const Product = (props) => {

  let { product, addToCart, buttonText, toggle, open } = props
  let addToCartClass = buttonText[product.id - 1] !== "+ Add to Cart" ? "added_to_cart" : "add_to_cart"

  return (
    <div className="menu_product_main" >
      <div className="menu_product_img">
        <img src={product.image} alt={product.title} />
      </div>
      <div className="menu_product_description">
        <h3>{product.title}</h3>
        <h4>{product.subTitle}</h4>
        <div className="menu_product_description_desc">
          {product.description.split('\n').map((item, i) =>
            (i === 2) ?
              (<div key={i}>
                <p className={"collapse" + (open ? ' in' : '')}>{item}
                </p>
                <div className="read_div">
                  <button className="read_more in" onClick={toggle}>{open ? "Read Less" : "Read More"}</button>
                </div>
              </div>
              )
              : <p key={i}>{item}</p>
          )
          }
        </div>
      </div>
      <div className="menu_product_shop">
        <p>${product.price} /ea.</p>
        <button className={addToCartClass} type="submit" onClick={() => addToCart(product)}>{buttonText[product.id - 1]}</button>
      </div>
    </div>
  )

}

export default Product;
