London10_Afsha_Hossain_cyf-hotel-react_React_Week1

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"

src/App.css

@@ -9,13 +9,15 @@
 
 .App-header {
   background-color: #222;
-  height: 50px;
-  padding: 20px;
+  height: 8.5rem;
+  padding: 1rem;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: bold;
+  display: flex;
+  flex-direction: row;
 }
 
 .App-title {
@@ -39,6 +41,10 @@
   padding: 5px 0 20px 0;
 }
 
+.table-bordered {
+  margin:2rem 0 5rem 0;
+}
+
 tr {
   color: #5b5757;
 }
@@ -52,6 +58,18 @@ tr {
   text-align: center;
 }
 
+.footer-ul {
+  list-style-type: none;
+}
+
+
 .card {
-  width: 18rem;
+  width: 35rem;
+}
+
+.cards-container {
+  display: flex;
+  flex-direction: row;
+  gap: 4rem;
+  margin-bottom: 4rem;
 }

src/App.js

@@ -1,13 +1,24 @@
 import React from "react";
-
+import Heading from "./components/Heading";
+import TouristInfoCards from "./components/TouristInfoCards";
 import Bookings from "./Bookings";
+import Footer from "./components/Footer";
 import "./App.css";
+import Restaurant from "./Restaurant";
 
 const App = () => {
+  const address = [
+    "123 Fake Street, London, E1 4UD",
+    "[email protected]",
+    "0123 456789",
+  ];
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <TouristInfoCards />
       <Bookings />
+      <Restaurant />
+      <Footer address = {address}/>
     </div>
   );
 };

src/Bookings.js

@@ -1,9 +1,12 @@
-import React from "react";
+import React, {useState} from 'react';
 import Search from "./Search.js";
+import SearchResults from "./components/SearchResults.jsx";
+
 // import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
+  const [bookings, setBookings] = useState(FakeBookings);
   const search = searchVal => {
     console.info("TO DO!", searchVal);
   };
@@ -12,7 +15,7 @@ const Bookings = () => {
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults results={bookings} />
       </div>
     </div>
   );

src/Restaurant.js

@@ -1,14 +1,15 @@
 import React from "react";
+import Order from "./components/Order";
 
 const Restaurant = () => {
-  const pizzas = 0;
+
   return (
-    <div>
+    <div className="restaurant-orders">
       <h3>Restaurant Orders</h3>
       <ul>
-        <li>
-          Pizzas: {pizzas} <button className="btn btn-primary">Add</button>
-        </li>
+        <Order orderType="Pizzas" />
+        <Order orderType="Salads" />
+        <Order orderType="Chocolate cake" />
       </ul>
     </div>
   );

src/Search.js

@@ -1,4 +1,5 @@
 import React from "react";
+import SearchButton from "./components/SearchButton";
 
 const Search = () => {
   return (
@@ -17,7 +18,7 @@ const Search = () => {
                 className="form-control"
                 placeholder="Customer name"
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton />
             </div>
           </form>
         </div>

src/components/Footer.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Footer = (props) => {
+  return (
+      <footer className="footer">
+        <ul className="footer-ul">
+          {props.address.map((element, index) => {
+            return <li className="footer-list" key={index}>{element}</li>;
+          })}
+        </ul>
+      </footer>
+  );
+};
+
+export default Footer;

src/components/Heading.jsx

@@ -0,0 +1,15 @@
+import react from "react";
+
+function Heading() {
+    return (
+      <header className="App-header">
+        <img
+          src="https://images.unsplash.com/photo-1564501049412-61c2a3083791?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
+          alt="logo"
+        />
+        <h1>CYF Hotel</h1>
+      </header>
+    );
+}
+
+export default Heading;

src/components/Order.jsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import RestaurantButton from "./RestaurantButton";
+
+const Order = ({orderType}) => {
+  const [orders, setOrders] = useState(0);
+  const orderOne = () => {
+    setOrders((orders) => orders + 1);
+  };
+  return (
+    <li>
+      {orderType}: {orders}
+      <RestaurantButton orderOne={orderOne} />
+    </li>
+  );
+};
+
+export default Order;

src/components/RestaurantButton.css

@@ -0,0 +1,10 @@
+.restaurant-orders {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 6rem;
+}
+
+.btn {
+    margin: 1.5rem 2rem;
+}

src/components/RestaurantButton.jsx

@@ -0,0 +1,10 @@
+import "./RestaurantButton.css";
+const RestaurantButton = ({ orderOne }) => {
+  return (
+    <button className="btn btn-primary" onClick={orderOne}>
+      Add
+    </button>
+  );
+};
+
+export default RestaurantButton;

src/components/SearchButton.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SearchButton = () => {
+  return <button className="btn btn-primary">Search</button>;
+};
+
+export default SearchButton;

src/components/SearchResults.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import moment from "moment";
+
+const SearchResults = (props) => {
+    return (
+      <table className="table table-bordered">
+        <thead>
+          <tr>
+            <th scope="col">Id</th>
+            <th scope="col">Title</th>
+            <th scope="col">First Name</th>
+            <th scope="col">Surname</th>
+            <th scope="col">Email</th>
+            <th scope="col">Room id</th>
+            <th scope="col">Check in date</th>
+            <th scope="col">Check out date</th>
+            <th scope="col">Number of nights</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.results.map((result, index) => {
+            const a = moment(result.checkOutDate);
+            const b = moment(result.checkInDate);
+            const days = a.diff(b, "days"); // 1
+            return (
+              <tr key={index}>
+                <td>{result.id}</td>
+                <td>{result.title}</td>
+                <td>{result.firstName}</td>
+                <td>{result.surname}</td>
+                <td>{result.email}</td>
+                <td>{result.roomId}</td>
+                <td>{result.checkInDate}</td>
+                <td>{result.checkOutDate}</td>
+                <td>{days}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    );
+};
+
+export default SearchResults;

src/components/TouristInfoCards.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+const TouristInfoCards = () => {
+
+    return (
+        <div className="cards-container">
+            <div className="card">
+                <img
+                    src="https://peoplemakeglasgow.com/imager/general/86786/Kelvingrove-Art-Gallery-and-Museum_8dc3bdbc8660ad389ec95cdf9b15d797.jpg"
+                    className="card-img-top"
+                    alt="Picture of Glasgow"
+                />
+                <div className="card-body">
+                    <h5 className="card-title">Glasgow</h5>
+                    <p className="card-text">
+                    Glasgow is unique in that many of the city's top museums and
+                    galleries are free-to-visit. Kelvingrove Art Gallery and Museum
+                    and The Burrell Collection are 2 of Scotland's cultural gems,
+                    famed for their world-class cultural collections, as well as their
+                    beautiful parkland settings.
+                    </p>
+                    <a href="peoplemakeglasgow.com" className="btn btn-primary">
+                    More Information
+                    </a>
+                </div>
+            </div>
+
+            <div className="card">
+                <img
+                    src="https://eu-assets.simpleview-europe.com/manchester2016/imageresizer/?image=%2Fdmsimgs%2FConwy_Harbour_22481198.jpg&action=ProductDetailFullWidth2"
+                    className="card-img-top"
+                    alt="Picture of Manchester"
+                />
+                <div className="card-body">
+                    <h5 className="card-title">Manchester</h5>
+                    <p className="card-text">
+                    Manchester is a major city in the northwest of England with a rich
+                    industrial heritage. The Castlefield conservation area’s
+                    18th-century canal system recalls the city’s days as a textile
+                    powerhouse, and visitors can trace this history at the interactive
+                    Museum of Science & Industry. The revitalised Salford Quays
+                    dockyards now house the Daniel Libeskind-designed Imperial War
+                    Museum North and the Lowry cultural centre.
+                    </p>
+                    <a href="https://www.visitmanchester.com/" className="btn btn-primary">
+                    More Information
+                    </a>
+                </div>
+            </div>
+            <div className="card">
+                <img
+                    src="https://cdn-lnp.dataweavers.io/-/media/images/london/visit/whats-on/event-pages/buckinghampalace1920x1080.jpg?rev=c88f581f5aa2444f97f3343f60008663?mw=640&hash=52C77C542B4531A72B120C5586046410"
+                    className="card-img-top"
+                    alt="Picture of London"
+                />
+                <div className="card-body">
+                    <h5 className="card-title">London</h5>
+                    <p className="card-text">
+                    Welcome to London! Discover the best of London with Visit London,
+                    the official guide to England’s exciting capital. Find things to
+                    do in London, from iconic sightseeing spots and fun-filled days
+                    out to top restaurants, theatre and unmissable London events. If
+                    you’re not able to visit just yet, plan ahead to make the most of
+                    your next visit.
+                    </p>
+                    <a href="https://www.visitlondon.com/" className="btn btn-primary">
+                    More Information
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default TouristInfoCards;

src/index.css

@@ -24,3 +24,8 @@ body {
 .search-row input {
   margin-right: 10px;
 }
+
+/* making space between logo and h1 */
+header > img {
+  margin-right: 2rem;
+}