done

src/App.jsx

@@ -1,22 +1,70 @@
-import Footer from "./Footer";
-import Header from "./Header";
+
+import React, { useState } from 'react';
+import Footer from './Footer';
+import Header from './Header';
+import MenuList from './menuList'; 
+import data from './data';
 
 function App() {
+  const [currentOrder, setCurrentOrder] = useState([]);
+  const [totalCost, setTotalCost] = useState(0);
+
+  const addToOrder = (item) => {
+    setCurrentOrder([...currentOrder, item]);
+    setTotalCost((prevTotal) => prevTotal + item.price);
+  };
+
+  const removeFromOrder = (index) => {
+    const removedItem = currentOrder[index];
+    setCurrentOrder(currentOrder.filter((_, i) => i !== index));
+    setTotalCost((prevTotal) => prevTotal - removedItem.price);
+  };
+
+  const tidyOrder = () => {
+    const tidiedOrder = currentOrder.reduce((acc, item) => {
+      const existingItem = acc.find((el) => el.id === item.id);
+      existingItem
+        ? (existingItem.quantity += 1)
+        : acc.push({ ...item, quantity: 1 });
+      return acc;
+    }, []);
+    setCurrentOrder(tidiedOrder);
+    setTotalCost(tidiedOrder.reduce((total, item) => total + item.price * item.quantity, 0));
+  };
+
+  const closeOrder = () => {
+    setCurrentOrder([]);
+    setTotalCost(0);
+  };
+
   return (
     <div className="App">
       <Header />
       <main>
         <aside>
-          <table></table>
+          <table>
+            <tbody>
+              {data.map((item) => (
+                <MenuList key={item.id} item={item} onAddToOrder={addToOrder} /> 
+              ))}
+            </tbody>
+          </table>
         </aside>
         <section>
           <div>
             <h2>Current Order</h2>
-            <ul></ul>
-            <h4>Total:</h4>
+            <ul>
+              {currentOrder.map((item, index) => (
+                <li key={item.id}>
+                  {item.name} - ${item.price} x {item.quantity}{' '}
+                  <button onClick={() => removeFromOrder(index)}>❌</button>
+                </li>
+              ))}
+            </ul>
+            <h4>Total: ${totalCost}</h4>
             <div>
-              <button>Tidy order</button>
-              <button>Close order</button>
+              <button onClick={tidyOrder}>Tidy order</button>
+              <button onClick={closeOrder}>Close order</button>
             </div>
           </div>
         </section>

src/menuList.jsx

@@ -0,0 +1,30 @@
+//Menu list
+import React from 'react';
+
+const MenuList = ({ item, onAddToOrder }) => {
+  const { name, price, spiceLevel, image } = item;
+
+  const addToOrder = () => {
+    onAddToOrder(item);
+  };
+
+  return (
+    <tr>
+      <td>
+        <span role="img" aria-label={name}>
+          {image}
+        </span>
+      </td>
+      <td className="item-name">
+        <span>{name}</span> <br />
+        <span>{'🌶️'.repeat(spiceLevel)}</span>
+      </td>
+      <td>{price}</td>
+      <td>
+        <button onClick={addToOrder}>Add to Order</button>
+      </td>
+    </tr>
+  );
+};
+
+export default MenuList;