London class 10-Junita Lama-react module-cyf hotel-week 1/2/3

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

@@ -1,40 +1,19 @@
-.App {
-  text-align: left;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+body {
+  background-color:aliceblue;
 }
-
 .App-header {
-  background-color: #222;
-  height: 50px;
-  padding: 20px;
+  background-color: black;
+  height: 60px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
-  font-weight: bold;
+  margin-bottom: 2rem;
 }
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 10px;
 }
 
-.App-content {
-  padding-top: 20px;
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .search {
   padding: 5px 0 20px 0;
 }
@@ -53,5 +32,100 @@ tr {
 }
 
 .card {
+  display: flex;
+  flex-direction: row;
+  row-gap: 50px;
+  justify-content: space-around;
+  background-color: aliceblue;
+}
+
+.logo {
+  height: 70px;
+  width: 100px;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+}
+
+h2 {
+  font-weight: bold;
+  font-size: 30px;
+  text-align: flex-start;
+  color: plum;
+}
+.card-img-top {
+  height: 25rem;
+  width: 28rem;
+}
+
+.card-title{
+  color: white;
+  background-color: black;
+  font-size: 1rem;
+}
+
+.card-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-size: 1rem;
+  background-color: beige;
+}
+.card-body {
   width: 18rem;
 }
+
+.btn-primary {
+  background-color: brown;
+}
+
+.welcome{
+display: flex;
+flex-direction: column;
+font-size: 2rem;
+}
+
+.welcome-img{
+  display: flex;
+  max-width: auto;
+  height: 25rem;
+  border: 2px solid brown;
+  margin: 0rem 4rem 1rem 4rem;
+
+
+}
+
+.welcome-text{
+  text-align: center;
+  color: blueviolet;
+}
+
+.table {
+  background-color: black;
+
+}
+
+th{
+  color: brown;
+}
+
+td{
+  color: beige;
+}
+
+@media only screen and (max-width: 600px) {
+  .card {
+    flex-direction: column;
+  }
+  .welcome-img{
+  margin: 0;
+
+ }
+ .table {
+  width: 40%;
+  font-size: 10px;;
+ }
+
+}

src/App.js

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

src/Bookings.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./SearchResults.js";
+import FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
   const search = searchVal => {
@@ -12,7 +12,7 @@ const Bookings = () => {
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults  results = {FakeBookings}/> 
       </div>
     </div>
   );

src/Footer.js

@@ -0,0 +1,17 @@
+import react from "react";
+
+const Footer = ({ props }) => {
+  return (
+    <div>
+      <footer>
+        <ul>
+          {props.map((prop) => {
+            return <li key={prop}>{prop}</li>;
+          })}
+        </ul>
+      </footer>
+    </div>
+  );
+};
+
+export default Footer;

src/Heading.js

@@ -0,0 +1,10 @@
+import React from "react";
+const Heading = () => {
+    const name = "CYF HOTEL"
+    return <header className="App-header">
+    <div><img src ="https://freesvg.org/img/1548468101.png" className = "logo"alt = "hotel-logo"></img></div>
+    <div><h2>{name}</h2></div>
+</header>
+}
+
+export default Heading;

src/Search.js

@@ -1,4 +1,5 @@
 import React from "react";
+import SearchButton from "./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/SearchButton.js

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

src/SearchResults.js

@@ -0,0 +1,44 @@
+import React from "react";
+import moment from "moment";
+
+const SearchResults = (props) => {
+  return (
+    <table class="table">
+      <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">Stay nights</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.results.map((result, index) => {
+          return (
+            <tr key={index}>
+              <th scope="row">{result.id}</th>
+              <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>{moment(result.checkOutDate).diff(
+                      moment(result.checkInDate),
+                      "days"
+                    )}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default SearchResults;

src/TouristInfoCards.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+const TouristInfoCard = () =>{
+    return <div class = "welcome">
+    <img src = "https://cache.marriott.com/content/dam/marriott-renditions/LONCH/lonch-suite-0167-hor-clsc.jpg?output-quality=70&interpolation=progressive-bilinear&downsize=572px:*" className = "welcome-img" alt="hotel-img"></img>
+    <p class = "welcome-text">Explore The World With Us!!!</p>
+    <div class="card">
+      <div>
+  <img src="https://peoplemakeglasgow.com/imager/general/45177/East-End-Glasgow-Cathedral-Image-Block_8dc3bdbc8660ad389ec95cdf9b15d797.jpg" class="card-img-top" alt="glasgow-pic"></img>
+  <div class="card-body">
+    <h5 class="card-title">Glasgow</h5>
+    <p class="card-text">You’re guaranteed to find accommodation in Glasgow which suits your taste and budget. Whether you’re looking for something uniquely Glaswegian, a trendy hotel, a vibrant hostel or a comfortable city centre apartment, you can be assured of a warm welcome.</p>
+    <a href="https://peoplemakeglasgow.com/" class="btn btn-primary">MORE INFO</a>
+  </div></div>
+  <div>
+  <img src="https://eu-assets.simpleview-europe.com/manchester2016/imageresizer/?image=%2Fdbimgs%2FManOne-03%284%29.jpg&action=Background_Overlay" class="card-img-top" alt="glasgow-pic"></img>
+  <div class="card-body">
+    <h5 class="card-title">Manchester</h5>
+    <p class="card-text">Manchester city centre is jam-packed with unique and eclectic restaurants, bars, shops, museums, galleries, hotels and places to stay whilst the surrounding Greater Manchester boroughs offer a patch-work of visitor experiences including quaint market towns, traditional pubs and beautiful green spaces and waterways to be explored on foot or bike. The city region is easily navigated, with great transport links both in and around Greater Manchester..</p>
+    <a href="https://www.visitmanchester.com/" class="btn btn-primary">MORE INFO</a>
+  </div></div>
+  <div>
+  <img src="https://cdn-lnp.dataweavers.io/-/media/images/london/visit/things-to-do/sightseeing/london-attractions/coca-cola-london-eye/the-london-eye-2-640x360.jpg?rev=95097c3d2aab47109d7b0e944c804d1b?mw=640&hash=EA6D4D5963997B5F368154E65A7FA187" class="card-img-top" alt="glasgow-pic"></img>
+  <div class="card-body">
+    <h5 class="card-title">London</h5>
+    <p class="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/" class="btn btn-primary">MORE INFO</a>
+  </div>
+</div>
+</div>
+</div>
+
+
+
+
+}
+
+export default TouristInfoCard;