ok

src/App.css

@@ -0,0 +1,111 @@
+/* App.css */
+.App {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.content {
+  display: flex;
+  gap: 20px;
+  padding: 20px;
+}
+
+.menu {
+  flex: 1;
+  display: inline-block;
+}
+
+.menu h2 {
+  margin-bottom: 10px;
+}
+
+.menu-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.menu-table td {
+  padding: 10px;
+  border: 1px solid #ccc;
+  text-align: center;
+}
+
+.menu-table img {
+  max-width: 100px;
+  max-height: 100px;
+  object-fit: cover;
+}
+
+.item-details {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;/
+}
+
+.current-order {
+  flex: 1;
+  display: inline-block;
+}
+
+.current-order h2 {
+  margin-bottom: 10px;
+}
+
+.current-order button {
+  margin-bottom: 10px;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.tidy-button {
+  margin: 0 auto; 
+}
+
+.order-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.order-table td {
+  padding: 10px;
+  border: 1px solid #ccc;
+  text-align: center;
+}
+
+.order-table td button {
+  color: red;
+  color: white;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+
+}
+
+
+footer {
+  background-color: #f9f9f9;
+  padding: 10px;
+  text-align: center;
+}
+
+
+header {
+  background-color: #007bff;
+  color: white;
+  padding: 10px;
+  text-align: center;
+}
+
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+}
+
+

src/App.jsx

@@ -1,29 +1,124 @@
-import Footer from "./Footer";
+// App.js
+import React, { useState } from "react";
+import menu from "./data";
 import Header from "./Header";
+import Footer from "./Footer";
+import "./App.css"; 
+
+const App = () => {
+  const [currentOrder, setCurrentOrder] = useState([]);
+  const [totalCost, setTotalCost] = useState(0);
+  const [tidyOrder, setTidyOrder] = useState(false);
+
+  const addItemToOrder = (item) => {
+    setCurrentOrder([...currentOrder, item]);
+    setTotalCost((prevTotal) => prevTotal + item.price);
+  };
+
+  const removeItemFromOrder = (itemId) => {
+    const itemToRemove = currentOrder.find((item) => item.id === itemId);
+    if (itemToRemove.quantity > 1) {
+      const updatedOrder = currentOrder.map((item) =>
+        item.id === itemId ? { ...item, quantity: item.quantity - 1 } : item
+      );
+      setCurrentOrder(updatedOrder);
+      setTotalCost((prevTotal) => prevTotal - itemToRemove.price);
+    } else {
+      const updatedOrder = currentOrder.filter((item) => item.id !== itemId);
+      setCurrentOrder(updatedOrder);
+      setTotalCost((prevTotal) => prevTotal - itemToRemove.price);
+    }
+  };
+
+  const closeOrder = () => {
+    setCurrentOrder([]);
+    setTotalCost(0);
+    setTidyOrder(false);
+  };
+
+  const tidyCurrentOrder = () => {
+    const orderMap = currentOrder.reduce((acc, item) => {
+      if (!acc[item.id]) {
+        acc[item.id] = { ...item, quantity: 1 };
+      } else {
+        acc[item.id].quantity += 1;
+      }
+      return acc;
+    }, {});
+
+    const tidiedOrder = Object.values(orderMap);
+    setCurrentOrder(tidiedOrder);
+    setTidyOrder(true);
+  };
 
-function App() {
   return (
     <div className="App">
       <Header />
-      <main>
-        <aside>
-          <table></table>
-        </aside>
-        <section>
-          <div>
-            <h2>Current Order</h2>
-            <ul></ul>
-            <h4>Total:</h4>
-            <div>
-              <button>Tidy order</button>
-              <button>Close order</button>
-            </div>
-          </div>
-        </section>
-      </main>
+
+      <div className="content">
+        {/* Menu */}
+        <div className="menu">
+          <h2>Menu</h2>
+          <table className="menu-table">
+            <tbody>
+              {menu.map((item) => (
+                <tr key={item.id} onClick={() => addItemToOrder(item)}>
+                  <td>
+                    <img src={item.image} alt={item.name} />
+                  </td>
+                  <td className="item-details">
+                    <span>{item.name}</span>
+                    <br />
+                    <span>
+                      {Array(item.spiceLevel)
+                        .fill("🌶️")
+                        .join("")}
+                    </span>
+                  </td>
+                  <td className="item-price">${item.price}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Current Order */}
+        <div className="current-order">
+          <h2>Current Order</h2>
+          <button className="tidy-button" onClick={tidyCurrentOrder}>
+            Tidy order
+          </button>
+          <table className="order-table">
+            <tbody>
+              {tidyOrder
+                ? currentOrder.map((item) => (
+                    <tr key={item.id}>
+                      <td>
+                        <button onClick={() => removeItemFromOrder(item.id)}>❌</button>
+                      </td>
+                      <td>{item.name} x {item.quantity}</td>
+                      <td>${item.price * item.quantity}</td>
+                    </tr>
+                  ))
+                : currentOrder.map((item) => (
+                    <tr key={item.id}>
+                      <td>
+                        <button onClick={() => removeItemFromOrder(item.id)}>❌</button>
+                      </td>
+                      <td>{item.name}</td>
+                      <td>${item.price}</td>
+                    </tr>
+                  ))}
+            </tbody>
+          </table>
+          <p>Total: ${totalCost}</p>
+          <button onClick={closeOrder}>Close order</button>
+        </div>
+      </div>
+
       <Footer />
     </div>
   );
-}
+};
 
 export default App;