From e96646019e65db0253d336ab57b2e6144f3bb71d Mon Sep 17 00:00:00 2001 From: Vitalina Kuzmenko Date: Fri, 24 Feb 2023 08:16:35 +0000 Subject: [PATCH 01/59] Adding logo and extracting searchButton --- src/App.css | 11 ++++++++++- src/App.js | 3 ++- src/Heading.js | 15 +++++++++++++++ src/Search.js | 3 ++- src/SearchButton.js | 7 +++++++ 5 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 src/Heading.js create mode 100644 src/SearchButton.js diff --git a/src/App.css b/src/App.css index 05fe2d52e..b834ce1ee 100644 --- a/src/App.css +++ b/src/App.css @@ -7,8 +7,12 @@ height: 80px; } +.App-header-image { + display: flex; + background-color: black; +} + .App-header { - background-color: #222; height: 50px; padding: 20px; color: white; @@ -18,6 +22,11 @@ font-weight: bold; } +.App-header-image img { + height: 50px; + width: auto; +} + .App-title { font-size: 1.5em; } diff --git a/src/App.js b/src/App.js index 953c98560..79e266719 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,13 @@ import React from "react"; import Bookings from "./Bookings"; +import Heading from "./Heading"; import "./App.css"; const App = () => { return (
-
CYF Hotel
+
); diff --git a/src/Heading.js b/src/Heading.js new file mode 100644 index 000000000..e8aacd55e --- /dev/null +++ b/src/Heading.js @@ -0,0 +1,15 @@ +import React from "react"; + +const Heading = () => { + return ( +
+
CYF Hotel
+ logo +
+ ); +}; + +export default Heading; diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..85b954e44 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,7 @@ const Search = () => { className="form-control" placeholder="Customer name" /> - + diff --git a/src/SearchButton.js b/src/SearchButton.js new file mode 100644 index 000000000..064ef2c27 --- /dev/null +++ b/src/SearchButton.js @@ -0,0 +1,7 @@ +import React from "react"; + +const SearchButton = () => { + return ; +}; + +export default SearchButton; From 2982a72031c9432aff7a9a49f491a461926ec34a Mon Sep 17 00:00:00 2001 From: Vitalina Kuzmenko Date: Fri, 24 Feb 2023 09:00:21 +0000 Subject: [PATCH 02/59] TouristsInfoCards componend added --- src/App.css | 12 +++++++++++ src/App.js | 6 ++++++ src/TouristInfoCards.js | 44 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 62 insertions(+) create mode 100644 src/TouristInfoCards.js diff --git a/src/App.css b/src/App.css index b834ce1ee..b29432b95 100644 --- a/src/App.css +++ b/src/App.css @@ -61,6 +61,18 @@ tr { text-align: center; } +.info-cards { + display: flex; + justify-content: center; +} + .card { width: 18rem; + margin: 0 20px; +} + +.card .card-body { + display: flex; + flex-direction: column; + align-items: center; } diff --git a/src/App.js b/src/App.js index 79e266719..4ea5b828f 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React from "react"; import Bookings from "./Bookings"; import Heading from "./Heading"; +import TouristInfoCards from "./TouristInfoCards"; import "./App.css"; const App = () => { @@ -9,6 +10,11 @@ const App = () => {
+
+ + + +
); }; diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..391e656c0 --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,44 @@ +import React from "react"; + +const TouristInfoCards = (props) => { + let imageURL = ""; + let infoCity = ""; + let link = ""; + function checkCity(city) { + if (city === "Glasgow") { + imageURL = + "https://www.greatbritishbucketlist.com/wp-content/uploads/2021/04/glasgow-4-1024x682.jpg"; + infoCity = + "Glasgow is a port city on the River Clyde in Scotland's western Lowlands. "; + link = "http://peoplemakeglasgow.com/"; + } else if (city === "Manchester") { + imageURL = + "https://eu-assets.simpleview-europe.com/manchester2016/imageresizer/?image=%2Fdbimgs%2Folympic-parade%20%281%29-min.jpg&action=BlogDetailContent"; + infoCity = + "Manchester is a major city in the northwest of England with a rich industrial heritage."; + link = "https://www.visitmanchester.com/"; + } else if (city === "London") { + imageURL = + "https://i.natgeofe.com/n/93231b5d-3b4f-4bd6-bcf4-4172ebda2011/parliment-square-london-england_3x2.jpg"; + infoCity = + "It is the largest metropolis in the United Kingdom, and it is also the country's economic, transportation, and cultural centre."; + link = "https://www.visitlondon.com/"; + } + } + checkCity(props.city); + + return ( +
+ +
+
{props.city}
+

{infoCity}

+ + More information + +
+
+ ); +}; + +export default TouristInfoCards; From 3f942e927874e10edfd0ce27f64353edebabe898 Mon Sep 17 00:00:00 2001 From: Vitalina Kuzmenko Date: Fri, 24 Feb 2023 09:17:06 +0000 Subject: [PATCH 03/59] Footer component added --- src/App.css | 9 +++++++++ src/App.js | 7 +++++++ src/Footer.js | 8 ++++++++ 3 files changed, 24 insertions(+) create mode 100644 src/Footer.js diff --git a/src/App.css b/src/App.css index b29432b95..46596237d 100644 --- a/src/App.css +++ b/src/App.css @@ -76,3 +76,12 @@ tr { flex-direction: column; align-items: center; } + +.footer-list { + list-style: none; + display: flex; + justify-content: space-around; + margin: 50px 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; +} diff --git a/src/App.js b/src/App.js index 4ea5b828f..00718e411 100644 --- a/src/App.js +++ b/src/App.js @@ -3,9 +3,15 @@ import React from "react"; import Bookings from "./Bookings"; import Heading from "./Heading"; import TouristInfoCards from "./TouristInfoCards"; +import Footer from "./Footer"; import "./App.css"; const App = () => { + let footerArray = [ + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789", + ]; return (
@@ -15,6 +21,7 @@ const App = () => {
+