greengrocers

src/App.jsx

@@ -1,44 +1,45 @@
-import './styles/reset.css'
-import './styles/index.css'
+import React, { useState } from 'react';
+import Store from './Store';
+import Cart from './Cart';
+import storeItems from './store-items';
+import './styles/index.css';
 
-import initialStoreItems from './store-items'
+function App() {
+  const [cart, setCart] = useState([]);
+
+  const addToCart = (item) => {
+    const existingItem = cart.find(cartItem => cartItem.id === item.id);
+    if (existingItem) {
+      setCart(cart.map(cartItem =>
+        cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem
+      ));
+    } else {
+      setCart([...cart, { ...item, quantity: 1 }]);
+    }
+  };
+
+  const updateQuantity = (id, quantity) => {
+    setCart(cart.map(cartItem =>
+      cartItem.id === id ? { ...cartItem, quantity: Math.max(0, cartItem.quantity + quantity) } : cartItem
+    ).filter(cartItem => cartItem.quantity > 0));
+  };
+
+  const getTotal = () => {
+    return cart.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2);
+  };
 
-export default function App() {
   return (
-    <>
+    <div>
       <header id="store">
         <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
+        <Store items={storeItems} addToCart={addToCart} />
       </header>
       <main id="cart">
         <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-          </ul>
-        </div>
-        <div className="total-section">
-          <div>
-            <h3>Total</h3>
-          </div>
-          <div>
-            <span className="total-number">£0.00</span>
-          </div>
-        </div>
+        <Cart cart={cart} updateQuantity={updateQuantity} total={getTotal()} />
       </main>
-      <div>
-        Icons made by
-        <a
-          href="https://www.flaticon.com/authors/icongeek26"
-          title="Icongeek26"
-        >
-          Icongeek26
-        </a>
-        from
-        <a href="https://www.flaticon.com/" title="Flaticon">
-          www.flaticon.com
-        </a>
-      </div>
-    </>
-  )
+    </div>
+  );
 }
+
+export default App;

src/Cart.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import CartItem from './CartItem';
+
+function Cart({ cart, updateQuantity, total }) {
+  return (
+    <div className="cart--item-list-container">
+      <ul className="item-list cart--item-list">
+        {cart.map(item => (
+          <CartItem key={item.id} item={item} updateQuantity={updateQuantity} />
+        ))}
+      </ul>
+      <div className="total-section">
+        <h3>Total</h3>
+        <span className="total-number">£{total}</span>
+      </div>
+    </div>
+  );
+}
+
+export default Cart;

src/CartItem.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function CartItem({ item, updateQuantity }) {
+  return (
+    <li>
+      <img className="cart--item-icon" src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+      <p>{item.name}</p>
+      <button className="quantity-btn remove-btn center" onClick={() => updateQuantity(item.id, -1)}>-</button>
+      <span className="quantity-text center">{item.quantity}</span>
+      <button className="quantity-btn add-btn center" onClick={() => updateQuantity(item.id, 1)}>+</button>
+    </li>
+  );
+}
+
+export default CartItem;

src/Item.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Item({ item, addToCart }) {
+  return (
+    <li>
+      <div className="store--item-icon">
+        <img src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+      </div>
+      <button onClick={() => addToCart(item)}>Add to cart</button>
+    </li>
+  );
+}
+
+export default Item;

src/Store.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Item from './Item';
+
+function Store({ items, addToCart }) {
+  return (
+    <ul className="item-list store--item-list">
+      {items.map(item => (
+        <Item key={item.id} item={item} addToCart={addToCart} />
+      ))}
+    </ul>
+  );
+}
+
+export default Store;

src/main.jsx

@@ -1,9 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './styles/index.css';
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+  document.getElementById('root')
+);

src/store-items.js

@@ -1,4 +1,3 @@
-
 const storeItems =  [
   {
     id: "001-beetroot",
@@ -70,6 +69,6 @@ const storeItems =  [
     description: "Eggplant, aubergine, brinjal, or baigan is a plant species in the nightshade family Solanaceae. Solanum melongena is grown worldwide for its edible fruit.",
     type: "vegetable"
   }
-]
+];
 
-export default storeItems
+export default storeItems;

src/styles/index.css

@@ -15,7 +15,6 @@ h2 {
 
 button {
   padding: 0.25rem 0.5rem;
-
   text-transform: uppercase;
   font-size: 0.725rem;
 }
@@ -25,9 +24,7 @@ button {
 #store {
   height: 40vh;
   padding: 1rem;
-
   overflow-y: scroll;
-
   background-color: #e7f4ea;
 }
 
@@ -70,12 +67,10 @@ button {
 #cart {
   height: 60vh;
   padding: 1rem;
-
   display: grid;
   grid-template-rows: auto 1fr auto;
   grid-gap: 1rem;
   justify-content: center;
-
   border-top: 2px solid #00675b;
 }
 
@@ -88,9 +83,7 @@ button {
   min-width: 320px;
   height: 100%;
   padding: 0 1rem;
-
   overflow-y: scroll;
-
   border-radius: 0.5rem;
   border: 2px solid #757575;
 }
@@ -103,14 +96,11 @@ button {
 
 .cart--item-list li {
   padding: 1rem 0;
-
   display: grid;
   grid-template-columns: 24px minmax(150px, 1fr) repeat(3, auto);
   grid-gap: 0.5rem;
   align-items: center;
-
   border-bottom: 1px dotted #000000;
-
   font-size: 1.25rem;
 }
 
@@ -131,9 +121,7 @@ button {
   width: 20px;
   height: 20px;
   padding: 0;
-
   border-radius: 0.25rem;
-
   font-weight: bold;
 }
 
@@ -152,11 +140,9 @@ button {
 .quantity-text {
   width: 24px;
   height: 24px;
-
   border-radius: 0.25rem;
   border: 2px solid #757575;
   color: #757575;
-
   text-align: center;
   font-size: 0.75rem;
   font-weight: bold;
@@ -166,7 +152,6 @@ button {
 
 .total-section {
   padding: 0.5rem 1rem;
-
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;