From 5852c13a38fc900dd627edba9c4f1e0290ff66f1 Mon Sep 17 00:00:00 2001 From: ebrahim beiati Date: Mon, 27 Feb 2023 19:53:36 +0000 Subject: [PATCH 1/4] React --- src/App.css | 3 +- src/App.js | 19 +++++++++--- src/Bookings.js | 8 ++--- src/Footer.jsx | 22 ++++++++++++++ src/Heading.jsx | 14 +++++++++ src/Order.jsx | 20 +++++++++++++ src/Restaurant.js | 12 ++++---- src/RestaurantButton.jsx | 10 +++++++ src/Search.js | 4 ++- src/SearchButton.jsx | 6 ++++ src/SearchResults.js | 36 ++++++++++++++++++++++ src/TouristInfoCards.jsx | 64 ++++++++++++++++++++++++++++++++++++++++ 12 files changed, 203 insertions(+), 15 deletions(-) create mode 100644 src/Footer.jsx create mode 100644 src/Heading.jsx create mode 100644 src/Order.jsx create mode 100644 src/RestaurantButton.jsx create mode 100644 src/SearchButton.jsx create mode 100644 src/SearchResults.js create mode 100644 src/TouristInfoCards.jsx diff --git a/src/App.css b/src/App.css index 05fe2d52e..6c7c57db3 100644 --- a/src/App.css +++ b/src/App.css @@ -3,8 +3,9 @@ } .App-logo { - animation: App-logo-spin infinite 20s linear; + /* animation: App-logo-spin infinite 20s linear; */ height: 80px; + width: 80px; } .App-header { diff --git a/src/App.js b/src/App.js index 953c98560..21c04003c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,26 @@ import React from "react"; - +import Heading from "./Heading"; import Bookings from "./Bookings"; +import TouristInfoCards from "./TouristInfoCards"; +import Restaurant from "./Restaurant" +import SearchResults from "./SearchResults"; +import Footer from "./Footer"; import "./App.css"; +import Order from "./Order"; const App = () => { + return (
-
CYF Hotel
+
CYF Hotel
+ + + + + +
); }; - -export default App; +export default App(); \ No newline at end of file diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..579b79c92 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,10 +1,10 @@ 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 => { + const search = (searchVal) => { console.info("TO DO!", searchVal); }; @@ -12,7 +12,7 @@ const Bookings = () => {
- {/* */} +
); diff --git a/src/Footer.jsx b/src/Footer.jsx new file mode 100644 index 000000000..a84aac808 --- /dev/null +++ b/src/Footer.jsx @@ -0,0 +1,22 @@ +import React from "react"; + +const props = [ + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789" +]; + + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/Heading.jsx b/src/Heading.jsx new file mode 100644 index 000000000..2e276a7fd --- /dev/null +++ b/src/Heading.jsx @@ -0,0 +1,14 @@ +import React from "react"; +const Heading = () => { + return ( +
+ + CYF Hotel +
+ ); +}; +export default Heading; diff --git a/src/Order.jsx b/src/Order.jsx new file mode 100644 index 000000000..e482f1656 --- /dev/null +++ b/src/Order.jsx @@ -0,0 +1,20 @@ +import React, { useState } from "react"; +import RestaurantButton from "./RestaurantButton"; + +const Order = (props) => { + const [orders, setOrders] = useState(0); + + function orderOne() { + setOrders(orders + 1); + } + + return ( +
  • + {props.orderType} :{" "} + {orders}{" "} + +
    • + ); +}; + +export default Order; diff --git a/src/Restaurant.js b/src/Restaurant.js index ecb2b43a2..73aeed7d7 100644 --- a/src/Restaurant.js +++ b/src/Restaurant.js @@ -5,11 +5,13 @@ const Restaurant = () => { return (

    Restaurant Orders

    - + + +
    ); }; diff --git a/src/RestaurantButton.jsx b/src/RestaurantButton.jsx new file mode 100644 index 000000000..45fd24331 --- /dev/null +++ b/src/RestaurantButton.jsx @@ -0,0 +1,10 @@ +import React from "react"; + +const RestaurantButton = props => { + return ( + + ); +}; + + +export default RestaurantButton; \ No newline at end of file diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..11c21d16b 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,4 +1,5 @@ import React from "react"; +import SearchButton from "./SearchButton"; const Search = () => { return ( @@ -17,7 +18,8 @@ const Search = () => { className="form-control" placeholder="Customer name" /> - + + diff --git a/src/SearchButton.jsx b/src/SearchButton.jsx new file mode 100644 index 000000000..7a3986244 --- /dev/null +++ b/src/SearchButton.jsx @@ -0,0 +1,6 @@ +import React from 'react'; + +const SearchButton =()=>{ + return +} +export default SearchButton; diff --git a/src/SearchResults.js b/src/SearchResults.js new file mode 100644 index 000000000..0228ce6f8 --- /dev/null +++ b/src/SearchResults.js @@ -0,0 +1,36 @@ +import React from "react"; + +const SearchResults = ({ bookings }) => { + return ( + + + + + + + + + + + + + + + {bookings.map((bookings) => ( + + + + + + + + + + + ))} + +
    IDTitleFirstnameSurenameEmailRoom IDCheck in DateCheck out Date
    {bookings.id}{bookings.title}{bookings.firstName}{bookings.surname}{bookings.email}{bookings.roomId}{bookings.checkInDate}{bookings.checkOutDate}
    + ); +}; + +export default SearchResults; diff --git a/src/TouristInfoCards.jsx b/src/TouristInfoCards.jsx new file mode 100644 index 000000000..0d621ed1a --- /dev/null +++ b/src/TouristInfoCards.jsx @@ -0,0 +1,64 @@ +import React from "react"; + +const TouristInfoCards = () => { + return ( +
    +
    + Glasgow on a budget +
    +
    Glasgow
    +

    + Glasgow's city centre is home to flagship stores, impressive + shopping centres and designer within an easily walkable area. +

    + + Visit Glasgow + +
    +
    +
    + Glasgow on a budget +
    +
    Greater Manchester
    +

    + Manchester is the only UK city to feature in Lonely Planet's Best in + Travel 2023 list and the only UK city in National Geographic. +

    + + Visit Manchester + +
    +
    +
    + Glasgow on a budget +
    +
    London
    +

    + London is known for its world-class museums, theaters, and galleries + and its iconic landmarks such as Buckingham Palace ... +

    + + Visit London + +
    +
    +
    + ); +}; + +export default TouristInfoCards; From 2cf737aa9d962343c0cc6491128ec927c3aeb506 Mon Sep 17 00:00:00 2001 From: ebrahim beiati Date: Thu, 2 Mar 2023 19:41:44 +0000 Subject: [PATCH 2/4] editing --- package-lock.json | 9 ++++ package.json | 1 + src/App.css | 101 +++++++++++++++++++++++++++++++++++---- src/App.js | 17 +++---- src/Bookings.js | 25 ++++++++-- src/Footer.jsx | 9 ++-- src/Heading.jsx | 14 +++--- src/Nights.jsx | 8 ++++ src/Order.jsx | 16 +++---- src/Restaurant.js | 16 +++---- src/RestaurantButton.jsx | 13 ++--- src/Search.js | 5 +- src/SearchButton.jsx | 9 ++-- src/SearchResults.js | 67 +++++++++++++++----------- src/TouristInfoCards.jsx | 6 +-- src/index.css | 6 +++ 16 files changed, 223 insertions(+), 99 deletions(-) create mode 100644 src/Nights.jsx diff --git a/package-lock.json b/package-lock.json index 8197e6f22..94217b93a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "react-hotel", "version": "0.1.0", "dependencies": { + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" @@ -11681,6 +11682,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", diff --git a/package.json b/package.json index e3e1562a7..f81c28013 100644 --- a/package.json +++ b/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" diff --git a/src/App.css b/src/App.css index 6c7c57db3..54f16c99a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ .App { text-align: left; + text-align: center; } .App-logo { @@ -9,23 +10,47 @@ } .App-header { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; background-color: #222; height: 50px; padding: 20px; + padding-left: 10px; color: white; text-align: left; font-family: Arial, Helvetica, sans-serif; - font-size: 1em; - font-weight: bold; + padding-top: 20px; + text-align: center; } .App-title { font-size: 1.5em; } +.headerContainer { + display: flex; + align-items: center; +} +.logo { + fill: rgb(205, 213, 205); + width: 50px; + height: 50px; + margin-right: 10px; + padding: 5px; + margin-left: 10px; + filter: invert(1); +} + +.cardContainer { + display: flex; + justify-content: center; + gap: 20px; +} .App-content { padding-top: 20px; - font-size: large; + font-size: bold; } @keyframes App-logo-spin { @@ -36,12 +61,10 @@ transform: rotate(360deg); } } -.search { - padding: 5px 0 20px 0; -} + tr { - color: #5b5757; + color: #3d3d3d; } .results { @@ -54,5 +77,67 @@ tr { } .card { - width: 18rem; + width: 15rem; +} + + +.search { + padding: 25px 0 15px 20px; +} +.headerContainer { + display: flex; + align-items: center; +} +.logo { + fill: rgb(109, 114, 109); + width: 50px; + height: 50px; + margin-right: 10px; + padding: 5px; + margin-left: 10px; + filter: invert(1); +} + +.cardContainer { + display: flex; + justify-content: center; + gap: 20px; +} + +.card { + width: 15rem; + display: flex; + flex-direction: column; + padding: 10px; + width: 40vh; +} +.card-img-top { + object-fit: cover; + width: 100%; + height: 100%; +} +.order-type { + display: flex; + gap: 20px; + text-decoration: none; + justify-content: space-between; + margin-top: 0; + margin-bottom: 1rem; + flex-direction: row; + align-items: center; } +footer ul { + display: flex; + justify-content: space-around; + list-style-type: none; + padding: 20px 0 5px 0; +} +table .thead-dark th { + color: #fff; + background-color: #212529; + border-color: #32383e; +} + +.selected-colour { + background-color: rgb(92, 85, 85); +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 21c04003c..b3646a2b2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,21 @@ import React from "react"; + import Heading from "./Heading"; import Bookings from "./Bookings"; import TouristInfoCards from "./TouristInfoCards"; -import Restaurant from "./Restaurant" -import SearchResults from "./SearchResults"; import Footer from "./Footer"; +import Restaurant from "./Restaurant"; import "./App.css"; -import Order from "./Order"; - const App = () => { - return (
    -
    CYF Hotel
    +
    CYF Hotel
    - - - - + +
    ); }; -export default App(); \ No newline at end of file +export default App; \ No newline at end of file diff --git a/src/Bookings.js b/src/Bookings.js index 579b79c92..fa0162c9d 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,9 +1,11 @@ -import React from "react"; -import Search from "./Search.js"; -import SearchResults from "./SearchResults.js"; +import React, { useState } from "react"; +import Search from "./Search"; +import SearchResults from "./SearchResults"; import FakeBookings from "./data/fakeBookings.json"; const Bookings = () => { + const [bookings, setBookings] = useState(FakeBookings); + const search = (searchVal) => { console.info("TO DO!", searchVal); }; @@ -12,7 +14,22 @@ const Bookings = () => {
    - + + + + + + + + + + + + + + + +
    IDTitleFirstnameSurenameEmailRoom IDCheck inCheck outNights
    ); diff --git a/src/Footer.jsx b/src/Footer.jsx index a84aac808..635b9818c 100644 --- a/src/Footer.jsx +++ b/src/Footer.jsx @@ -1,16 +1,15 @@ import React from "react"; const props = [ - "123 Fake Street, London, E1 4UD", - "hello@fakehotel.com", - "0123 456789" + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789", ]; - const Footer = () => { return (