Merge branch 'main' of https://github.com/areebsattar/React-Module-Project

Author: Sabella-8

src/components/App/App.jsx

@@ -15,9 +15,7 @@ const App = () => (
     </div>
     <Bookings />
     <Restaurant />
-
     <Deck />
-
     <Footer
       details={[
         "123 Fake Street, London, E1 4UD",

src/components/AppHeader/AppHeader.jsx

@@ -1,4 +1,4 @@
-import Logo from "@/assets/spa-logo.png";
+import Logo from "@/assets/hotel-logo.png";
 import "./AppHeader.scss";
 const AppHeader = () => <img className="LogoImg" src={Logo}></img>;
 export default AppHeader;

src/components/Order/Order.jsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import RestaurantButton from "../RestaurantButton/RestaurantButton";
+
+function Order({orderType}) {
+  const [pizzas, setPizzas] = useState(0);
+
+  const OrderOne = () => {
+    setPizzas(pizzas + 1);
+  };
+  return (
+    <>
+      <li className="restaurant__item">{orderType}: {pizzas} </li>
+      <RestaurantButton OrderOne={OrderOne} />
+    </>
+  );
+}
+
+export default Order

src/components/Order/Order.scss

@@ -1,22 +1,13 @@
-import { useState } from "react";
+import Order from "../Order/Order";
 
 function Restaurant() {
-  const [pizzas, setPizzas] = useState(0);
-
-  function buttonAdd() {
-    setPizzas(pizzas + 1);
-  }
-
   return (
     <section className="restaurant">
       <h3 className="restaurant__heading">Restaurant Orders</h3>
       <ul className="restaurant__list">
-        <li className="restaurant__item">
-          Pizzas: {pizzas}{" "}
-          <button className="button restaurant__button" onClick={buttonAdd}>
-            Add
-          </button>
-        </li>
+        <Order orderType={"Pizzas"} />
+        <Order orderType={"Salads"} />
+        <Order orderType={"Chocolate Cake"} />
       </ul>
     </section>
   );

src/components/Order/Order.test.jsx

@@ -0,0 +1,12 @@
+
+function RestaurantButton({ OrderOne }) {
+  return (
+    <>
+      <button type="button" className="button restaurant__button" onClick={OrderOne}>
+        Add
+      </button>
+    </>
+  );
+}
+
+export default RestaurantButton

src/components/Restaurant/Restaurant.jsx

@@ -18,7 +18,6 @@ function SearchResult() {
             "day"
           );
           return (
-            <>
               <TableBody
                 key={book.id}
                 id={book.id}
@@ -31,12 +30,11 @@ function SearchResult() {
                 checkOutDate={book.checkOutDate}
                 stayNights={stayNightsTotal}
               />
-            </>
           );
         })}
       </tbody>
     </table>
   );
 }
 export default SearchResult;
-console.log(SearchResult());
+