Merge pull request #34 from areebsattar/search-results

NW6  | Sabella Fisseha  | Search results- id, title, name, surname, email

Author: areebsattar

src/components/App/App.jsx

@@ -4,12 +4,14 @@ 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">
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
+    <AppHeader />
     <Bookings />
 
     <Deck />

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;

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>
   );
 };

src/components/SearchResult/SearchResult.jsx

@@ -0,0 +1,33 @@
+import "./SearchResult.scss";
+import FakeBookings from "@/data/fakeBookings.json";
+import TableBody from "./TableBody";
+import TableHead from "./TableHead";
+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}
+              roomId={book.roomId}
+              checkInDate={book.checkInDate}
+              checkOutDate={book.checkOutDate}
+            />
+          </>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+export default SearchResult;
+console.log(SearchResult());

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;
+}

src/components/SearchResult/TableBody.jsx

@@ -0,0 +1,31 @@
+// import FakeBookings from "@/data/fakeBookings.json";
+
+function TableBody(props) {
+  let {
+    id,
+    title,
+    name,
+    firstName,
+    surName,
+    email,
+    roomId,
+    checkInDate,
+    checkOutDate,
+  } = props;
+  return (
+    <>
+      <tr key={id}>
+        <td>{id}</td>
+        <td>{title}</td>
+        <td>{firstName}</td>
+        <td>{surName}</td>
+        <td>{email}</td>
+        <td>{roomId}</td>
+        <td>{checkInDate}</td>
+        <td>{checkOutDate}</td>
+      </tr>
+    </>
+  );
+}
+
+export default TableBody;

src/components/SearchResult/TableHead.jsx

@@ -0,0 +1,17 @@
+function TableHead() {
+  return (
+    <>
+      <tr>
+        <th>ID</th>
+        <th>Title</th>
+        <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>
+    </>
+  );
+}
+export default TableHead;