From 1d9cf63ee52e913f88c5e43a64f883128acb4b37 Mon Sep 17 00:00:00 2001
From: areebsattar <areebsattar1@gmail.com>
Date: Mon, 26 Feb 2024 01:20:32 +0000
Subject: [PATCH 01/28] created footer and rendered it to the bottom of the
 page

---
 src/components/App/App.jsx        |  9 +++++++++
 src/components/App/App.scss       | 18 ++++++++++++++++--
 src/components/Footer/Footer.jsx  | 16 ++++++++++++++++
 src/components/Footer/Footer.scss |  5 +++++
 src/main.jsx                      |  3 +++
 5 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Footer/Footer.jsx
 create mode 100644 src/components/Footer/Footer.scss

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 7035044..f6dd53f 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -1,5 +1,6 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
+import Footer from "../Footer/Footer";
 
 const App = () => (
   <div className="app">
@@ -7,6 +8,14 @@ const App = () => (
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
     <Bookings />
+    <Footer
+      details={[
+        "123 Fake Street, London, E1 4UD",
+        "hello@fakehotel.com",
+        "0123 456789",
+      ]}
+      className="footer"
+    />
   </div>
 );
 
diff --git a/src/components/App/App.scss b/src/components/App/App.scss
index 69b6530..9ef363d 100644
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@@ -1,8 +1,22 @@
-.app {
-}
 .app {
   display: grid;
+  grid-template-rows: auto 1fr auto; /* Set up three rows - header, content, footer */
   max-width: var(--space--container);
   margin: auto;
   padding: var(--space--gap);
+  min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */
+}
+
+.app__header {
+  background-color: var(--color--paper);
+  padding: var(--space--m);
+}
+
+.app__heading {
+  margin: 0;
+}
+
+.footer {
+  background-color: var(--color--paper);
+  padding: var(--space--m);
 }
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
new file mode 100644
index 0000000..83a8357
--- /dev/null
+++ b/src/components/Footer/Footer.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import "./Footer.scss"
+
+export default function Footer(props) {
+  return (
+    <>
+      <footer>
+        <ul>
+          {props.details.map((detail, id) => (
+            <li key={id}>{detail}</li>
+          ))}
+        </ul>
+      </footer>
+    </>
+  );
+}
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
new file mode 100644
index 0000000..0348a0d
--- /dev/null
+++ b/src/components/Footer/Footer.scss
@@ -0,0 +1,5 @@
+.footer {
+  margin-top: auto;
+  background-color: var(--color--paper);
+  padding: var(--space--m);
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 1e57698..811364e 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,6 +3,9 @@ import ReactDOM from "react-dom/client";
 import App from "@/components/App/App.jsx";
 import "./index.css";
 
+
+
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />

From bfa8acaf4e05655ca15f3b400f682c159ffd446e Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Mon, 26 Feb 2024 16:53:10 +0000
Subject: [PATCH 02/28] Import the SearchButton component into Search file

---
 src/components/Search/Search.jsx             | 4 +++-
 src/components/SearchButton/SearchButton.jsx | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
index eb19775..e77485c 100644
--- a/src/components/Search/Search.jsx
+++ b/src/components/Search/Search.jsx
@@ -1,4 +1,5 @@
 import "./Search.scss";
+import SearchButton from "../SearchButton/SearchButton";
 
 const Search = () => (
   <section className="search">
@@ -15,7 +16,8 @@ const Search = () => (
         className="search__input"
         placeholder="Customer name"
       />
-      <button className="button search__button">Search</button>
+      <SearchButton />
+      {SearchButton}
     </form>
   </section>
 );
diff --git a/src/components/SearchButton/SearchButton.jsx b/src/components/SearchButton/SearchButton.jsx
index 8b13789..1284b96 100644
--- a/src/components/SearchButton/SearchButton.jsx
+++ b/src/components/SearchButton/SearchButton.jsx
@@ -1 +1,7 @@
+import React from "react";
 
+const SearchButton = () => {
+  return <button className="button search__button">Search</button>;
+};
+
+export default SearchButton;

From 33c1cce66cc3b408a9ffeb6cda372b114aa827f6 Mon Sep 17 00:00:00 2001
From: Sabella-8 <gsabella549@gmail.com>
Date: Mon, 26 Feb 2024 21:10:43 +0000
Subject: [PATCH 03/28] feature card

---
 src/components/App/App.jsx   |  3 ++-
 src/components/Card/Card.jsx | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 7035044..2220914 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -1,12 +1,13 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
-
+import Deck from "../Deck/Deck";
 const App = () => (
   <div className="app">
     <header className="app__header">
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
     <Bookings />
+    <Deck />
   </div>
 );
 
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index b93f799..a3dff1a 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -1,9 +1,15 @@
-// import "./Card.scss";
+import React from "react";
+import "./Card.scss";
 
-// const Card = ({ title, url, image }) => {
-//   return (
+const Card = (props) => {
+  const { title, url, image } = props;
+  return (
+    <div className="card">
+      <h2>{title}</h2>
+      <img src={image} alt={title} />
+      <a href={url}>Visit {title}</a>
+    </div>
+  );
+};
 
-//   );
-// };
-
-// export default Card;
+export default Card;

From 205be4521c3b708f61488ef93a34b41687068c4d Mon Sep 17 00:00:00 2001
From: Sabella-8 <gsabella549@gmail.com>
Date: Mon, 26 Feb 2024 21:15:24 +0000
Subject: [PATCH 04/28] feature-deck

---
 src/components/Deck/Deck.jsx | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/Deck/Deck.jsx b/src/components/Deck/Deck.jsx
index 9760d2b..c9215bc 100644
--- a/src/components/Deck/Deck.jsx
+++ b/src/components/Deck/Deck.jsx
@@ -1,11 +1,20 @@
-// import Card from "@/components/Card/Card";
-// import "./Deck.scss";
-// import cardsData from "@/data/fakeCards.json";
+import Card from "@/components/Card/Card";
+import "./Deck.scss";
+import cardsData from "@/data/fakeCards.json";
 
-// const Deck = () => {
-// you will need to map over the cardsData array and render a Card component for each card object
-// how will you pass props to the Card component?
+const Deck = (props) => {
+  return (
+    <div className="deck">
+      {cardsData.map((city, index) => (
+        <Card
+          key={index}
+          title={city.title}
+          url={city.url}
+          image={city.image}
+        />
+      ))}
+    </div>
+  );
+};
 
-// };
-
-// export default Deck;
+export default Deck;

From 8e63c3919374e09455b55d5f8fcdf1ea24e5602a Mon Sep 17 00:00:00 2001
From: Sabella-8 <gsabella549@gmail.com>
Date: Mon, 26 Feb 2024 21:33:56 +0000
Subject: [PATCH 05/28] card

---
 src/components/Card/Card.jsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index b93f799..a3dff1a 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -1,9 +1,15 @@
-// import "./Card.scss";
+import React from "react";
+import "./Card.scss";
 
-// const Card = ({ title, url, image }) => {
-//   return (
+const Card = (props) => {
+  const { title, url, image } = props;
+  return (
+    <div className="card">
+      <h2>{title}</h2>
+      <img src={image} alt={title} />
+      <a href={url}>Visit {title}</a>
+    </div>
+  );
+};
 
-//   );
-// };
-
-// export default Card;
+export default Card;

From 6219d16d85be8eab6411f9c7ca133dbb9a1739e9 Mon Sep 17 00:00:00 2001
From: Sabella-8 <gsabella549@gmail.com>
Date: Mon, 26 Feb 2024 21:42:37 +0000
Subject: [PATCH 06/28] feature-card

---
 src/components/App/App.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 2220914..4ce89ab 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -1,13 +1,11 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
-import Deck from "../Deck/Deck";
 const App = () => (
   <div className="app">
     <header className="app__header">
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
     <Bookings />
-    <Deck />
   </div>
 );
 

From 747b76a4a85822ec5c73d14523acf528b0f1f7d2 Mon Sep 17 00:00:00 2001
From: Sabella-8 <gsabella549@gmail.com>
Date: Tue, 27 Feb 2024 11:52:29 +0000
Subject: [PATCH 07/28] feature-deck

---
 src/components/App/App.jsx   | 3 ++-
 src/components/Card/Card.jsx | 2 +-
 src/data/fakeCards.json      | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 7035044..2220914 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -1,12 +1,13 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
-
+import Deck from "../Deck/Deck";
 const App = () => (
   <div className="app">
     <header className="app__header">
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
     <Bookings />
+    <Deck />
   </div>
 );
 
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index a3dff1a..c9de6f9 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -7,7 +7,7 @@ const Card = (props) => {
     <div className="card">
       <h2>{title}</h2>
       <img src={image} alt={title} />
-      <a href={url}>Visit {title}</a>
+      <a href={url}> {title}</a>
     </div>
   );
 };
diff --git a/src/data/fakeCards.json b/src/data/fakeCards.json
index f8e5dfa..e29dfec 100644
--- a/src/data/fakeCards.json
+++ b/src/data/fakeCards.json
@@ -2,16 +2,16 @@
   {
     "title": "Glasgow",
     "url": "https://peoplemakeglasgow.com",
-    "image": "placeholderImage.svg"
+    "image": "https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2023/04/06/queens-park"
   },
   {
     "title": "Manchester",
     "url": "https://visitmanchester.com",
-    "image": "placeholderImage.svg"
+    "image": "https://media.wired.co.uk/photos/6357b98e09e6f1942a2a8a9a/16:9/w_1920,c_limit/HSBC%20MANCHESTER.jpeg"
   },
   {
     "title": "London",
     "url": "https://visitlondon.com",
-    "image": "placeholderImage.svg"
+    "image": "https://media.istockphoto.com/id/1347665170/photo/london-at-sunset.jpg?s=1024x1024&w=is&k=20&c=ogVKCS26t23fSvgCO77CC_6mhtxMDk2cmBOUQ9VamYo="
   }
 ]

From d35bbef202a49a34de244e32fc2cdc7680f3725d Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Tue, 27 Feb 2024 20:19:29 +0000
Subject: [PATCH 08/28] fixing the SearchButton component

---
 src/components/Search/Search.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
index e77485c..9ee9aff 100644
--- a/src/components/Search/Search.jsx
+++ b/src/components/Search/Search.jsx
@@ -17,7 +17,6 @@ const Search = () => (
         placeholder="Customer name"
       />
       <SearchButton />
-      {SearchButton}
     </form>
   </section>
 );

From f2268afaf020cbf17bab2e3a01b6a192278e588c Mon Sep 17 00:00:00 2001
From: Sabella-8 <gsabella549@gmail.com>
Date: Tue, 27 Feb 2024 22:28:53 +0000
Subject: [PATCH 09/28] MERGINING DECK

---
 src/components/App/App.jsx   |  3 ++-
 src/components/Deck/Deck.jsx | 27 ++++++++++++++++++---------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index f6dd53f..70dd9e7 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -1,13 +1,14 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
 import Footer from "../Footer/Footer";
-
+import Deck from "../Deck/Deck";
 const App = () => (
   <div className="app">
     <header className="app__header">
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
     <Bookings />
+    <Deck />
     <Footer
       details={[
         "123 Fake Street, London, E1 4UD",
diff --git a/src/components/Deck/Deck.jsx b/src/components/Deck/Deck.jsx
index 9760d2b..c9215bc 100644
--- a/src/components/Deck/Deck.jsx
+++ b/src/components/Deck/Deck.jsx
@@ -1,11 +1,20 @@
-// import Card from "@/components/Card/Card";
-// import "./Deck.scss";
-// import cardsData from "@/data/fakeCards.json";
+import Card from "@/components/Card/Card";
+import "./Deck.scss";
+import cardsData from "@/data/fakeCards.json";
 
-// const Deck = () => {
-// you will need to map over the cardsData array and render a Card component for each card object
-// how will you pass props to the Card component?
+const Deck = (props) => {
+  return (
+    <div className="deck">
+      {cardsData.map((city, index) => (
+        <Card
+          key={index}
+          title={city.title}
+          url={city.url}
+          image={city.image}
+        />
+      ))}
+    </div>
+  );
+};
 
-// };
-
-// export default Deck;
+export default Deck;

From 43e1179a8e06d88db9f5ad8025b7605ef161d0b8 Mon Sep 17 00:00:00 2001
From: Sabella-8 <gsabella549@gmail.com>
Date: Wed, 28 Feb 2024 00:23:52 +0000
Subject: [PATCH 10/28] search-results up to email

---
 src/components/App/App.jsx                    |  2 ++
 src/components/AppHeader/AppHeader.jsx        | 10 +++----
 src/components/Bookings/Bookings.jsx          |  3 +-
 src/components/SearchResult/SearchResult.jsx  | 30 +++++++++++++++++++
 src/components/SearchResult/SearchResult.scss | 19 ++++++++++++
 src/components/SearchResult/TabeleHead.jsx    | 14 +++++++++
 src/components/SearchResult/TableBody.jsx     | 18 +++++++++++
 src/data/fakeCards.json                       |  6 ++--
 8 files changed, 92 insertions(+), 10 deletions(-)
 create mode 100644 src/components/SearchResult/SearchResult.jsx
 create mode 100644 src/components/SearchResult/SearchResult.scss
 create mode 100644 src/components/SearchResult/TabeleHead.jsx
 create mode 100644 src/components/SearchResult/TableBody.jsx

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 70dd9e7..4156324 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -2,11 +2,13 @@ import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
 import Footer from "../Footer/Footer";
 import Deck from "../Deck/Deck";
+import AppHeader from "../AppHeader/AppHeader";
 const App = () => (
   <div className="app">
     <header className="app__header">
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
+    <AppHeader />
     <Bookings />
     <Deck />
     <Footer
diff --git a/src/components/AppHeader/AppHeader.jsx b/src/components/AppHeader/AppHeader.jsx
index 7007442..8e5bc8e 100644
--- a/src/components/AppHeader/AppHeader.jsx
+++ b/src/components/AppHeader/AppHeader.jsx
@@ -1,6 +1,4 @@
-// import Logo from "@/assets/spa-logo.png";
-// import "./AppHeader.scss";
-// const AppHeader = () => (
-// what goes in here? there is no content in the AppHeader component
-// );
-// export default AppHeader;
+import Logo from "@/assets/spa-logo.png";
+import "./AppHeader.scss";
+const AppHeader = () => <img src={Logo}></img>;
+export default AppHeader;
diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index 5db6972..fa5e5e6 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -1,4 +1,5 @@
 import Search from "@/components/Search/Search";
+import SearchResult from "../SearchResult/SearchResult";
 // import SearchResults from "@/componentsSearchResults.js";
 // import FakeBookings from "@/data/fakeBookings.json";
 
@@ -10,7 +11,7 @@ const Bookings = () => {
   return (
     <main className="bookings">
       <Search search={search} />
-      {/* <SearchResults results={FakeBookings} /> */}
+      <SearchResult />
     </main>
   );
 };
diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx
new file mode 100644
index 0000000..9208e81
--- /dev/null
+++ b/src/components/SearchResult/SearchResult.jsx
@@ -0,0 +1,30 @@
+import "./SearchResult.scss";
+import FakeBookings from "@/data/fakeBookings.json";
+import TableBody from "./TableBody";
+import TableHead from "./tabeleHead";
+const Bookings = FakeBookings;
+function SearchResult() {
+  return (
+    <table>
+      <thead>
+        <TableHead />
+      </thead>
+      <tbody>
+        {Bookings.map((book) => (
+          <>
+            <TableBody
+              key={book.id}
+              id={book.id}
+              title={book.title}
+              firstName={book.firstName}
+              surName={book.surname}
+              email={book.email}
+            />
+          </>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+export default SearchResult;
+console.log(SearchResult());
diff --git a/src/components/SearchResult/SearchResult.scss b/src/components/SearchResult/SearchResult.scss
new file mode 100644
index 0000000..e68e6aa
--- /dev/null
+++ b/src/components/SearchResult/SearchResult.scss
@@ -0,0 +1,19 @@
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+thead {
+  background-color: #f2f2f2;
+}
+
+th,
+td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  font-weight: bold;
+}
diff --git a/src/components/SearchResult/TabeleHead.jsx b/src/components/SearchResult/TabeleHead.jsx
new file mode 100644
index 0000000..9c938a2
--- /dev/null
+++ b/src/components/SearchResult/TabeleHead.jsx
@@ -0,0 +1,14 @@
+function TableHead() {
+  return (
+    <>
+      <tr>
+        <th>ID</th>
+        <th>Title</th>
+        <th>First name</th>
+        <th>Lastname</th>
+        <th>Email</th>
+      </tr>
+    </>
+  );
+}
+export default TableHead;
diff --git a/src/components/SearchResult/TableBody.jsx b/src/components/SearchResult/TableBody.jsx
new file mode 100644
index 0000000..6dea1b8
--- /dev/null
+++ b/src/components/SearchResult/TableBody.jsx
@@ -0,0 +1,18 @@
+// import FakeBookings from "@/data/fakeBookings.json";
+
+function TableBody(props) {
+  let { id, title, name, firstName, surName, email } = props;
+  return (
+    <>
+      <tr key={id}>
+        <td>{id}</td>
+        <td>{title}</td>
+        <td>{firstName}</td>
+        <td>{surName}</td>
+        <td>{email}</td>
+      </tr>
+    </>
+  );
+}
+
+export default TableBody;
diff --git a/src/data/fakeCards.json b/src/data/fakeCards.json
index f8e5dfa..e29dfec 100644
--- a/src/data/fakeCards.json
+++ b/src/data/fakeCards.json
@@ -2,16 +2,16 @@
   {
     "title": "Glasgow",
     "url": "https://peoplemakeglasgow.com",
-    "image": "placeholderImage.svg"
+    "image": "https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2023/04/06/queens-park"
   },
   {
     "title": "Manchester",
     "url": "https://visitmanchester.com",
-    "image": "placeholderImage.svg"
+    "image": "https://media.wired.co.uk/photos/6357b98e09e6f1942a2a8a9a/16:9/w_1920,c_limit/HSBC%20MANCHESTER.jpeg"
   },
   {
     "title": "London",
     "url": "https://visitlondon.com",
-    "image": "placeholderImage.svg"
+    "image": "https://media.istockphoto.com/id/1347665170/photo/london-at-sunset.jpg?s=1024x1024&w=is&k=20&c=ogVKCS26t23fSvgCO77CC_6mhtxMDk2cmBOUQ9VamYo="
   }
 ]

From 2f15a8999a72cd0a6eb4b8766bac78b79fa73cdb Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Wed, 28 Feb 2024 18:34:57 +0000
Subject: [PATCH 11/28] adding room id, check in date and check out date

---
 src/components/SearchResult/SearchResult.jsx |  3 +++
 src/components/SearchResult/TabeleHead.jsx   |  3 +++
 src/components/SearchResult/TableBody.jsx    | 15 ++++++++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx
index 9208e81..47e74c5 100644
--- a/src/components/SearchResult/SearchResult.jsx
+++ b/src/components/SearchResult/SearchResult.jsx
@@ -19,6 +19,9 @@ function SearchResult() {
               firstName={book.firstName}
               surName={book.surname}
               email={book.email}
+              roomId={book.roomId}
+              checkInDate={book.checkInDate}
+              checkOutDate={book.checkOutDate}
             />
           </>
         ))}
diff --git a/src/components/SearchResult/TabeleHead.jsx b/src/components/SearchResult/TabeleHead.jsx
index 9c938a2..7a43335 100644
--- a/src/components/SearchResult/TabeleHead.jsx
+++ b/src/components/SearchResult/TabeleHead.jsx
@@ -7,6 +7,9 @@ function TableHead() {
         <th>First name</th>
         <th>Lastname</th>
         <th>Email</th>
+        <th>Room Id</th>
+        <th>Check in date</th>
+        <th>Check out date</th>
       </tr>
     </>
   );
diff --git a/src/components/SearchResult/TableBody.jsx b/src/components/SearchResult/TableBody.jsx
index 6dea1b8..d9ac9a7 100644
--- a/src/components/SearchResult/TableBody.jsx
+++ b/src/components/SearchResult/TableBody.jsx
@@ -1,7 +1,17 @@
 // import FakeBookings from "@/data/fakeBookings.json";
 
 function TableBody(props) {
-  let { id, title, name, firstName, surName, email } = props;
+  let {
+    id,
+    title,
+    name,
+    firstName,
+    surName,
+    email,
+    roomId,
+    checkInDate,
+    checkOutDate,
+  } = props;
   return (
     <>
       <tr key={id}>
@@ -10,6 +20,9 @@ function TableBody(props) {
         <td>{firstName}</td>
         <td>{surName}</td>
         <td>{email}</td>
+        <td>{roomId}</td>
+        <td>{checkInDate}</td>
+        <td>{checkOutDate}</td>
       </tr>
     </>
   );

From 5d8a11bfdd49b8b3fbec13dd39dd054337eaa811 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Wed, 28 Feb 2024 18:39:56 +0000
Subject: [PATCH 12/28] erasing changes

---
 src/components/SearchResult/SearchResult.jsx |  3 ---
 src/components/SearchResult/TabeleHead.jsx   |  3 ---
 src/components/SearchResult/TableBody.jsx    | 15 +--------------
 3 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx
index 47e74c5..9208e81 100644
--- a/src/components/SearchResult/SearchResult.jsx
+++ b/src/components/SearchResult/SearchResult.jsx
@@ -19,9 +19,6 @@ function SearchResult() {
               firstName={book.firstName}
               surName={book.surname}
               email={book.email}
-              roomId={book.roomId}
-              checkInDate={book.checkInDate}
-              checkOutDate={book.checkOutDate}
             />
           </>
         ))}
diff --git a/src/components/SearchResult/TabeleHead.jsx b/src/components/SearchResult/TabeleHead.jsx
index 7a43335..9c938a2 100644
--- a/src/components/SearchResult/TabeleHead.jsx
+++ b/src/components/SearchResult/TabeleHead.jsx
@@ -7,9 +7,6 @@ function TableHead() {
         <th>First name</th>
         <th>Lastname</th>
         <th>Email</th>
-        <th>Room Id</th>
-        <th>Check in date</th>
-        <th>Check out date</th>
       </tr>
     </>
   );
diff --git a/src/components/SearchResult/TableBody.jsx b/src/components/SearchResult/TableBody.jsx
index d9ac9a7..6dea1b8 100644
--- a/src/components/SearchResult/TableBody.jsx
+++ b/src/components/SearchResult/TableBody.jsx
@@ -1,17 +1,7 @@
 // import FakeBookings from "@/data/fakeBookings.json";
 
 function TableBody(props) {
-  let {
-    id,
-    title,
-    name,
-    firstName,
-    surName,
-    email,
-    roomId,
-    checkInDate,
-    checkOutDate,
-  } = props;
+  let { id, title, name, firstName, surName, email } = props;
   return (
     <>
       <tr key={id}>
@@ -20,9 +10,6 @@ function TableBody(props) {
         <td>{firstName}</td>
         <td>{surName}</td>
         <td>{email}</td>
-        <td>{roomId}</td>
-        <td>{checkInDate}</td>
-        <td>{checkOutDate}</td>
       </tr>
     </>
   );

From 08739f11593ebd75c13885091fdc56ca3552c67a Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Wed, 28 Feb 2024 18:43:10 +0000
Subject: [PATCH 13/28] adding room id, check in date and check out date in
 tablehead.jsx file

---
 src/components/SearchResult/TabeleHead.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/SearchResult/TabeleHead.jsx b/src/components/SearchResult/TabeleHead.jsx
index 9c938a2..054068c 100644
--- a/src/components/SearchResult/TabeleHead.jsx
+++ b/src/components/SearchResult/TabeleHead.jsx
@@ -7,6 +7,9 @@ function TableHead() {
         <th>First name</th>
         <th>Lastname</th>
         <th>Email</th>
+        <th>Room id</th>
+        <th>Check in date</th>
+        <th>Check out date</th>
       </tr>
     </>
   );

From 5ca2999a1bb9c94768e148918898c81c1ab98ee6 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Wed, 28 Feb 2024 18:44:38 +0000
Subject: [PATCH 14/28] adding room id, check in date and check out date in
 tableBody.jsx

---
 src/components/SearchResult/TableBody.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchResult/TableBody.jsx b/src/components/SearchResult/TableBody.jsx
index 6dea1b8..d9ac9a7 100644
--- a/src/components/SearchResult/TableBody.jsx
+++ b/src/components/SearchResult/TableBody.jsx
@@ -1,7 +1,17 @@
 // import FakeBookings from "@/data/fakeBookings.json";
 
 function TableBody(props) {
-  let { id, title, name, firstName, surName, email } = props;
+  let {
+    id,
+    title,
+    name,
+    firstName,
+    surName,
+    email,
+    roomId,
+    checkInDate,
+    checkOutDate,
+  } = props;
   return (
     <>
       <tr key={id}>
@@ -10,6 +20,9 @@ function TableBody(props) {
         <td>{firstName}</td>
         <td>{surName}</td>
         <td>{email}</td>
+        <td>{roomId}</td>
+        <td>{checkInDate}</td>
+        <td>{checkOutDate}</td>
       </tr>
     </>
   );

From 3c7ff9ddfa13cf893c1e8a98db89d7c8dede34b7 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Wed, 28 Feb 2024 18:46:24 +0000
Subject: [PATCH 15/28] adding roomId, checkInDate and checkOutDate in
 SearchResult.jsx

---
 src/components/SearchResult/SearchResult.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx
index 9208e81..47e74c5 100644
--- a/src/components/SearchResult/SearchResult.jsx
+++ b/src/components/SearchResult/SearchResult.jsx
@@ -19,6 +19,9 @@ function SearchResult() {
               firstName={book.firstName}
               surName={book.surname}
               email={book.email}
+              roomId={book.roomId}
+              checkInDate={book.checkInDate}
+              checkOutDate={book.checkOutDate}
             />
           </>
         ))}

From fd0ddb3b120afb3d05ae6dc7cbb80bb287d81ac3 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Wed, 28 Feb 2024 22:10:30 +0000
Subject: [PATCH 16/28] changing the lowercase t to capital letter T in
 TabeleHead

---
 src/components/SearchResult/SearchResult.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx
index 47e74c5..b337c36 100644
--- a/src/components/SearchResult/SearchResult.jsx
+++ b/src/components/SearchResult/SearchResult.jsx
@@ -1,7 +1,7 @@
 import "./SearchResult.scss";
 import FakeBookings from "@/data/fakeBookings.json";
 import TableBody from "./TableBody";
-import TableHead from "./tabeleHead";
+import TableHead from "./TabeleHead";
 const Bookings = FakeBookings;
 function SearchResult() {
   return (

From da0bae0049ac50f0e0d8b6256441580e9b52f3ca Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Wed, 28 Feb 2024 22:28:51 +0000
Subject: [PATCH 17/28] Rename the TableHead file

---
 src/components/SearchResult/SearchResult.jsx                  | 2 +-
 src/components/SearchResult/{TabeleHead.jsx => TableHead.jsx} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/SearchResult/{TabeleHead.jsx => TableHead.jsx} (100%)

diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx
index b337c36..fac7e27 100644
--- a/src/components/SearchResult/SearchResult.jsx
+++ b/src/components/SearchResult/SearchResult.jsx
@@ -1,7 +1,7 @@
 import "./SearchResult.scss";
 import FakeBookings from "@/data/fakeBookings.json";
 import TableBody from "./TableBody";
-import TableHead from "./TabeleHead";
+import TableHead from "./TableHead";
 const Bookings = FakeBookings;
 function SearchResult() {
   return (
diff --git a/src/components/SearchResult/TabeleHead.jsx b/src/components/SearchResult/TableHead.jsx
similarity index 100%
rename from src/components/SearchResult/TabeleHead.jsx
rename to src/components/SearchResult/TableHead.jsx

From b4aeabf4398a963bf439e8f7abcaf6fec3cf34d9 Mon Sep 17 00:00:00 2001
From: areebsattar <areebsattar1@gmail.com>
Date: Wed, 28 Feb 2024 23:19:30 +0000
Subject: [PATCH 18/28] Fixed error related to Deck after merging

---
 src/components/App/App.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index e714d2e..4176d88 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -1,11 +1,9 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
-
-import Deck from "../Deck/Deck";
-
 import Footer from "../Footer/Footer";
 import Deck from "../Deck/Deck";
 import AppHeader from "../AppHeader/AppHeader";
+
 const App = () => (
   <div className="app">
     <header className="app__header">

From 594162be710e3bbc5302cb97bc5aa7a2061bfcca Mon Sep 17 00:00:00 2001
From: areebsattar <areebsattar1@gmail.com>
Date: Fri, 1 Mar 2024 00:26:39 +0000
Subject: [PATCH 19/28] Added the column to calculate the total nights of stay

---
 package-lock.json                            |  6 +++
 package.json                                 |  1 +
 src/components/SearchResult/SearchResult.jsx | 39 ++++++++++++--------
 src/components/SearchResult/TableBody.jsx    |  2 +
 src/components/SearchResult/TableHead.jsx    |  1 +
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0c1c491..df034c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "cyf-react-hotel",
       "version": "0.0.0",
       "dependencies": {
+        "dayjs": "^1.11.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -2028,6 +2029,11 @@
         "url": "https://opencollective.com/date-fns"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 1fc32f7..64d2226 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx
index fac7e27..825e1d3 100644
--- a/src/components/SearchResult/SearchResult.jsx
+++ b/src/components/SearchResult/SearchResult.jsx
@@ -2,6 +2,8 @@ import "./SearchResult.scss";
 import FakeBookings from "@/data/fakeBookings.json";
 import TableBody from "./TableBody";
 import TableHead from "./TableHead";
+import dayjs from "dayjs";
+
 const Bookings = FakeBookings;
 function SearchResult() {
   return (
@@ -10,21 +12,28 @@ function SearchResult() {
         <TableHead />
       </thead>
       <tbody>
-        {Bookings.map((book) => (
-          <>
-            <TableBody
-              key={book.id}
-              id={book.id}
-              title={book.title}
-              firstName={book.firstName}
-              surName={book.surname}
-              email={book.email}
-              roomId={book.roomId}
-              checkInDate={book.checkInDate}
-              checkOutDate={book.checkOutDate}
-            />
-          </>
-        ))}
+        {Bookings.map((book) => {
+          const stayNightsTotal = dayjs(book.checkOutDate).diff(
+            dayjs(book.checkInDate),
+            "day"
+          );
+          return (
+            <>
+              <TableBody
+                key={book.id}
+                id={book.id}
+                title={book.title}
+                firstName={book.firstName}
+                surName={book.surname}
+                email={book.email}
+                roomId={book.roomId}
+                checkInDate={book.checkInDate}
+                checkOutDate={book.checkOutDate}
+                stayNights={stayNightsTotal}
+              />
+            </>
+          );
+        })}
       </tbody>
     </table>
   );
diff --git a/src/components/SearchResult/TableBody.jsx b/src/components/SearchResult/TableBody.jsx
index d9ac9a7..c690b0c 100644
--- a/src/components/SearchResult/TableBody.jsx
+++ b/src/components/SearchResult/TableBody.jsx
@@ -11,6 +11,7 @@ function TableBody(props) {
     roomId,
     checkInDate,
     checkOutDate,
+    stayNights,
   } = props;
   return (
     <>
@@ -23,6 +24,7 @@ function TableBody(props) {
         <td>{roomId}</td>
         <td>{checkInDate}</td>
         <td>{checkOutDate}</td>
+        <td>{stayNights}</td>
       </tr>
     </>
   );
diff --git a/src/components/SearchResult/TableHead.jsx b/src/components/SearchResult/TableHead.jsx
index 054068c..9afda64 100644
--- a/src/components/SearchResult/TableHead.jsx
+++ b/src/components/SearchResult/TableHead.jsx
@@ -10,6 +10,7 @@ function TableHead() {
         <th>Room id</th>
         <th>Check in date</th>
         <th>Check out date</th>
+        <th>Total Nights to Stay</th>
       </tr>
     </>
   );

From 48b962f16ca4db9b1b9ceb455ed84255025c3925 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Fri, 1 Mar 2024 21:09:43 +0000
Subject: [PATCH 20/28] adding div with class to App.jsx, adding css to
 App.scss, adding a class to AppHeader.jsx and css to AppHeader.scss

---
 src/components/App/App.jsx              | 10 ++++++----
 src/components/App/App.scss             |  1 +
 src/components/AppHeader/AppHeader.jsx  |  2 +-
 src/components/AppHeader/AppHeader.scss | 13 +++++++++++++
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 4176d88..d3b2267 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -6,10 +6,12 @@ import AppHeader from "../AppHeader/AppHeader";
 
 const App = () => (
   <div className="app">
-    <header className="app__header">
-      <h1 className="app__heading">CYF Hotel</h1>
-    </header>
-    <AppHeader />
+    <div className="header">
+      <header className="app__header">
+        <h1 className="app__heading">CYF Hotel</h1>
+      </header>
+      <AppHeader />
+    </div>
     <Bookings />
 
     <Deck />
diff --git a/src/components/App/App.scss b/src/components/App/App.scss
index 9ef363d..c9d8391 100644
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@@ -14,6 +14,7 @@
 
 .app__heading {
   margin: 0;
+  margin-top: 30%;
 }
 
 .footer {
diff --git a/src/components/AppHeader/AppHeader.jsx b/src/components/AppHeader/AppHeader.jsx
index 8e5bc8e..7503605 100644
--- a/src/components/AppHeader/AppHeader.jsx
+++ b/src/components/AppHeader/AppHeader.jsx
@@ -1,4 +1,4 @@
 import Logo from "@/assets/spa-logo.png";
 import "./AppHeader.scss";
-const AppHeader = () => <img src={Logo}></img>;
+const AppHeader = () => <img className="LogoImg" src={Logo}></img>;
 export default AppHeader;
diff --git a/src/components/AppHeader/AppHeader.scss b/src/components/AppHeader/AppHeader.scss
index 8885c6c..d8bbaf5 100644
--- a/src/components/AppHeader/AppHeader.scss
+++ b/src/components/AppHeader/AppHeader.scss
@@ -7,3 +7,16 @@
     max-width: 100px;
   }
 }
+
+.header {
+  margin-right: 35%;
+  margin-left: 35%;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-evenly;
+}
+
+.LogoImg {
+  height: 150px;
+  width: 150px;
+}

From 2897bbf1b400e5886460989550c3b172c800ea94 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Sun, 3 Mar 2024 17:33:56 +0000
Subject: [PATCH 21/28] create new branch FeatureRestaurant

---
 src/components/App/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index d3b2267..0e3c73d 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -2,7 +2,7 @@ import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
 import Footer from "../Footer/Footer";
 import Deck from "../Deck/Deck";
-import AppHeader from "../AppHeader/AppHeader";
+impoert AppHeader from "../AppHeader/AppHeader";
 
 const App = () => (
   <div className="app">

From 880c4c3e55424e8ddf6b02d9ca1cb39ab915b01c Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Sun, 3 Mar 2024 17:35:05 +0000
Subject: [PATCH 22/28] change done to restore the webpage

---
 src/components/App/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 0e3c73d..d3b2267 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -2,7 +2,7 @@ import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
 import Footer from "../Footer/Footer";
 import Deck from "../Deck/Deck";
-impoert AppHeader from "../AppHeader/AppHeader";
+import AppHeader from "../AppHeader/AppHeader";
 
 const App = () => (
   <div className="app">

From e5bc6fab53da80cba6b4051675390dd65e856307 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Sun, 3 Mar 2024 17:36:55 +0000
Subject: [PATCH 23/28] Rendering the Restaurant Component in App.jsx

---
 src/components/App/App.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index d3b2267..78e96b5 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -3,6 +3,7 @@ import "./App.scss";
 import Footer from "../Footer/Footer";
 import Deck from "../Deck/Deck";
 import AppHeader from "../AppHeader/AppHeader";
+import Restaurant from "../Restaurant/Restaurant";
 
 const App = () => (
   <div className="app">
@@ -13,6 +14,7 @@ const App = () => (
       <AppHeader />
     </div>
     <Bookings />
+    <Restaurant />
 
     <Deck />
 

From d88461ee7e33dfcc149778cdc1ff2485e5b9fa0b Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Sun, 3 Mar 2024 17:57:44 +0000
Subject: [PATCH 24/28] Working in the Restaurant component

---
 src/components/Restaurant/Restaurant.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx
index 378b963..152cfa9 100644
--- a/src/components/Restaurant/Restaurant.jsx
+++ b/src/components/Restaurant/Restaurant.jsx
@@ -6,7 +6,9 @@ const Restaurant = () => {
       <ul className="restaurant__list">
         <li className="restaurant__item">
           Pizzas: {pizzas}{" "}
-          <button className="button restaurant__button">Add</button>
+          <button className="button restaurant__button" onClick={Restaurant}>
+            Add
+          </button>
         </li>
       </ul>
     </section>

From 2954242fd71115d37b7c479a97609a5a363b7b33 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Sun, 3 Mar 2024 18:23:49 +0000
Subject: [PATCH 25/28] Adding the function restaurant and buttonAdd to
 increase the number of pizzas when the button Add is clicked

---
 src/components/Restaurant/Restaurant.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx
index 152cfa9..6c2a5b5 100644
--- a/src/components/Restaurant/Restaurant.jsx
+++ b/src/components/Restaurant/Restaurant.jsx
@@ -1,18 +1,25 @@
-const Restaurant = () => {
-  const pizzas = 0;
+import { useState } from "react";
+
+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={Restaurant}>
+          <button className="button restaurant__button" onClick={buttonAdd}>
             Add
           </button>
         </li>
       </ul>
     </section>
   );
-};
+}
 
 export default Restaurant;

From 4fa785a01a9c27fa588511c2c078bbc80a8f45a8 Mon Sep 17 00:00:00 2001
From: OrlandoMoralesKuan <omoralesk@hotmail.com>
Date: Sun, 3 Mar 2024 18:34:34 +0000
Subject: [PATCH 26/28] Adding margin bottom to the section restaurant in the
 App.scss file

---
 src/components/App/App.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/App/App.scss b/src/components/App/App.scss
index c9d8391..a8bab3d 100644
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@@ -17,6 +17,10 @@
   margin-top: 30%;
 }
 
+.restaurant {
+  margin-bottom: 20px;
+}
+
 .footer {
   background-color: var(--color--paper);
   padding: var(--space--m);

From 25da0c4c8ef99d7fcc284c9488515c79bed1c1be Mon Sep 17 00:00:00 2001
From: nazaninsaedi <nazaninsaedi088@gmail.com>
Date: Tue, 5 Mar 2024 21:33:25 +0000
Subject: [PATCH 27/28] feature booking state Done

---
 src/components/Bookings/Bookings.test.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Bookings/Bookings.test.jsx b/src/components/Bookings/Bookings.test.jsx
index 69e294f..dd9d344 100644
--- a/src/components/Bookings/Bookings.test.jsx
+++ b/src/components/Bookings/Bookings.test.jsx
@@ -1,11 +1,11 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Bookings from "./Bookings.jsx";
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Bookings from './Bookings.jsx';
 
-describe("Bookings Component", () => {
-  it("renders a main element", () => {
+describe('Bookings Component', () => {
+  it('renders a main element', () => {
     render(<Bookings />);
-    const mainElement = screen.getByRole("main");
+    const mainElement = screen.getByRole('main');
     expect(mainElement).toBeInTheDocument();
   });
 });

From 9eb31cf5a7c38519defcbf5bcff2f7d9b4b54703 Mon Sep 17 00:00:00 2001
From: nazaninsaedi <nazaninsaedi088@gmail.com>
Date: Tue, 5 Mar 2024 21:34:08 +0000
Subject: [PATCH 28/28] FeatureBookingsStateDone

---
 src/components/Bookings/Bookings.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx
index fa5e5e6..a10c3af 100644
--- a/src/components/Bookings/Bookings.jsx
+++ b/src/components/Bookings/Bookings.jsx
@@ -1,9 +1,15 @@
+import React, { useState } from 'react';
 import Search from "@/components/Search/Search";
 import SearchResult from "../SearchResult/SearchResult";
+import FakeBookings from '@/data/fakeBookings.json';
+
 // import SearchResults from "@/componentsSearchResults.js";
 // import FakeBookings from "@/data/fakeBookings.json";
 
 const Bookings = () => {
+
+  const [bookings, setBookings] = useSatet(FakeBookings);
+
   const search = (searchVal) => {
     console.info("TO DO!", searchVal);
   };
@@ -11,7 +17,7 @@ const Bookings = () => {
   return (
     <main className="bookings">
       <Search search={search} />
-      <SearchResult />
+      <SearchResult bookings={bookings} />
     </main>
   );
 };