From 2466b217930e16eb8fa59b869de77dc6880c52a3 Mon Sep 17 00:00:00 2001 From: malkitbenning Date: Wed, 31 May 2023 22:09:40 +0100 Subject: [PATCH 01/29] we have started! --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 953c98560..41bba5ac6 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,7 @@ import "./App.css"; const App = () => { return (
-
CYF Hotel
+
CYF Hotel DJMS
); From 5c28141eabff9e5518639368f3214125e84fad7e Mon Sep 17 00:00:00 2001 From: siveromar <109865820+siveromar@users.noreply.github.com> Date: Sat, 3 Jun 2023 12:26:03 +0100 Subject: [PATCH 02/29] made searchButton a component --- src/Search.js | 4 +++- src/SearchButton.js | 9 +++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 src/SearchButton.js diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..689517d08 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.js b/src/SearchButton.js new file mode 100644 index 000000000..b004dad88 --- /dev/null +++ b/src/SearchButton.js @@ -0,0 +1,9 @@ +import React from "react"; + +const SearchButton = () => { + return ( + + ); +}; + +export default SearchButton; \ No newline at end of file From 29c6619a57adb1442531c513a02fb54f3ac9acc6 Mon Sep 17 00:00:00 2001 From: Delnia Alipour Date: Sat, 3 Jun 2023 13:21:25 +0100 Subject: [PATCH 03/29] Create and use a new component to show info cards --- src/App.js | 3 +- src/TouristInfoCards.css | 16 +++++++++++ src/TouristInfoCards.js | 62 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 src/TouristInfoCards.css create mode 100644 src/TouristInfoCards.js diff --git a/src/App.js b/src/App.js index 41bba5ac6..515580118 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import React from "react"; - +import TouristInfoCard from "./TouristInfoCards"; import Bookings from "./Bookings"; import "./App.css"; @@ -8,6 +8,7 @@ const App = () => {
CYF Hotel DJMS
+
); }; diff --git a/src/TouristInfoCards.css b/src/TouristInfoCards.css new file mode 100644 index 000000000..be000c235 --- /dev/null +++ b/src/TouristInfoCards.css @@ -0,0 +1,16 @@ +.card-container { + display: flex; + justify-content: center; + align-items: stretch; + gap: 20px; + height: 100%; + margin: 1rem; +} + +.card { + flex: 1; + display: grid; + grid-template-rows: auto 1fr auto; + border: 3px green solid; + text-align: center; +} diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..34022fdf7 --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,62 @@ +import React from "react"; +import "./TouristInfoCards.css"; + +const Card = ({ image, title, description, link }) => { + return ( +
+ {title} +
+
{title}
+

{description}

+ + More Information + +
+
+ ); +}; + +function TouristInfoCards() { + const cardsData = [ + { + image: + "https://images.unsplash.com/photo-1632724442187-6f189af4d4d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", + title: "Glasgow", + description: + "Glasgow is a vibrant city known for its rich history, cultural attractions, and lively music scene. Explore the stunning architecture, visit world-class museums, and enjoy the friendly atmosphere.", + link: "https://www.peoplemakeglasgow.com/", + }, + { + image: + "https://images.unsplash.com/photo-1605021149343-bb75d2a2fa44?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", + title: "Manchester", + description: + "Manchester is a vibrant city known for its thriving music and art scene, world-class football, and rich industrial heritage. Explore its diverse neighborhoods, visit iconic landmarks, and indulge in its renowned shopping and dining experiences.", + link: "https://www.visitmanchester.com/", + }, + { + image: + "https://images.unsplash.com/photo-1520986606214-8b456906c813?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", + title: "London", + description: + "London, the capital city of England, is a global hub of culture, history, and entertainment. Explore its iconic landmarks, including the Tower of London and Buckingham Palace. Immerse yourself in the diverse culinary scene, vibrant theater shows, and world-class museums.", + link: "https://www.visitlondon.com/", + }, + ]; + + return ( +
+ {cardsData.map((card, index) => ( + + ))} +
+ ); +} + +export default TouristInfoCards; From 0626cde6db5d8d7cc8cac6b7ad9696a8f664b7a3 Mon Sep 17 00:00:00 2001 From: Joseph Mwanza Date: Sat, 3 Jun 2023 15:32:08 +0100 Subject: [PATCH 04/29] Made a header and centred the image --- src/App.js | 7 ++++++- src/Header.css | 9 +++++++++ src/Header.js | 11 +++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 src/Header.css create mode 100644 src/Header.js diff --git a/src/App.js b/src/App.js index 41bba5ac6..1821be9e7 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,17 @@ import React from "react"; import Bookings from "./Bookings"; import "./App.css"; +import Heading from "./Header"; + const App = () => { return (
-
CYF Hotel DJMS
+ {/*
CYF Hotel DJMS
*/} + + +
); }; diff --git a/src/Header.css b/src/Header.css new file mode 100644 index 000000000..de946ce81 --- /dev/null +++ b/src/Header.css @@ -0,0 +1,9 @@ +img { + height: 80px; + display: flex; + margin-left: auto; + margin-right: auto; + + + +} \ No newline at end of file diff --git a/src/Header.js b/src/Header.js new file mode 100644 index 000000000..4e25f0880 --- /dev/null +++ b/src/Header.js @@ -0,0 +1,11 @@ +import React from "react"; +import "./Header.css"; + +const Heading = () => { + return (
+ +
+ ) +} + +export default Heading; \ No newline at end of file From f9aefa1a44ba287ac6b649cbc7d4492ea55fee1f Mon Sep 17 00:00:00 2001 From: siveromar <109865820+siveromar@users.noreply.github.com> Date: Sat, 3 Jun 2023 15:36:44 +0100 Subject: [PATCH 05/29] Completed Footer --- src/App.js | 3 +++ src/Footer.js | 13 +++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 src/Footer.js diff --git a/src/App.js b/src/App.js index 41bba5ac6..8ee548d26 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React from "react"; +import Footer from "./Footer"; import Bookings from "./Bookings"; import "./App.css"; @@ -8,6 +9,8 @@ const App = () => {
CYF Hotel DJMS
+ +
); }; diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 000000000..8475c9d61 --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,13 @@ +import React from "react"; + +const Footer = (props) => ( +
    + {props.addressDetail.map((addressLine, index) => { + return ( +
  • {addressLine}
    • + ) + })} +
+); + +export default Footer; \ No newline at end of file From 9ad983753daf0935e7f26276d87103b88bc05f9d Mon Sep 17 00:00:00 2001 From: malkitbenning Date: Sun, 4 Jun 2023 10:12:38 +0100 Subject: [PATCH 06/29] Changed file names to match requrements changed to TouristInfoCards, also changed header to heading where required --- src/App.js | 14 ++++++++++---- src/{Header.css => Heading.css} | 0 src/{Header.js => Heading.js} | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) rename src/{Header.css => Heading.css} (100%) rename src/{Header.js => Heading.js} (92%) diff --git a/src/App.js b/src/App.js index 27a790084..ed67ae33e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,9 @@ import React from "react"; -import TouristInfoCard from "./TouristInfoCards"; +import TouristInfoCards from "./TouristInfoCards"; import Footer from "./Footer"; import Bookings from "./Bookings"; import "./App.css"; -import Heading from "./Header"; +import Heading from "./Heading"; const App = () => { @@ -13,8 +13,14 @@ const App = () => { - -