diff --git a/src/SearchButton.js b/src/SearchButton.js
new file mode 100644
index 000000000..1f7f0f7ce
--- /dev/null
+++ b/src/SearchButton.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+
+const SearchButton = () => {
+
+ return (
+
Search
+ );
+};
+
+export default SearchButton;
\ No newline at end of file
diff --git a/src/SearchResultsOld.js b/src/SearchResultsOld.js
new file mode 100644
index 000000000..0e78d6a1d
--- /dev/null
+++ b/src/SearchResultsOld.js
@@ -0,0 +1,79 @@
+// import React, { useState } from "react";
+
+// import CustomerProfile from "./CustomerProfile";
+// import data from "./data/fakeBookings.json";
+// import moment from "moment";
+// const numberOfNights()
+
+// const SearchResults = (props) => {
+// const [highlight, sethighlight] = useState(null);
+// // const [customerid, setCustomerId] = useState(null);
+
+// const handleId = (props) => {
+
+// setCustomerId(props.id)
+// }
+
+// const { results } = props;
+
+// const toggleHighlight = (index) => {
+// if (index == highlight) {
+// sethighlight(null);
+// } else {
+// sethighlight(index);
+// }
+// };
+
+// console.log(props.id)
+
+
+// return (
+//
+//
+//
+// ID
+// Tittle
+// First Name
+// Surname
+// Email
+// Room ID
+// check in Date
+// check out Date
+// No of Night stay
+// Show profile
+//
+
+// {results.map((item, index) => {
+// return (
+// toggleHighlight(index)}
+// style={{ backgroundColor: index == highlight ? "yellow" : "" }}
+// key={index}
+// >
+// {item.id}
+// {item.title}
+// {item.firstName}
+// {item.surname}
+// {item.email}
+// {item.roomId}
+// {item.checkInDate}
+// {item.checkOutDate}
+//
+// {(new Date(`${item.checkOutDate}T00:00:01Z`) -
+// new Date(`${item.checkInDate}T00:00:01Z`)) /
+// 86400000}
+//
+//
+// Show profile
+//
+//
+// );
+// })}
+//
+//
+// );
+// };
+// export default SearchResults;
diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js
new file mode 100644
index 000000000..3c4d78d62
--- /dev/null
+++ b/src/TouristInfoCards.js
@@ -0,0 +1,89 @@
+import React from "react";
+
+const TouristInfoCards = () => {
+ return (
+ <>
+ {/* TouristInfoCards - Glasgow */}
+
+
+
+
+
+
Glasgow
+
+
+ Glasgow is a port city on the River Clyde in Scotland's western
+ Lowlands. It's famed for its Victorian and art nouveau
+ architecture, a rich legacy of the city's 18th century prosperity
+ due to trade and shipbuilding.
+
+
+
+
+
+ {/* TouristInfoCards - Manchester */}
+
+
+
+
+
Manchester
+
+
+ Manchester is a major city in the northwest of England with a rich
+ industrial heritage. The Castlefield conservation area’s
+ 18th-century canal system.
+
+
+
+
+
+ {/* TouristInfoCards - London */}
+
+
+
+
London
+
+ London, the capital of England and the United Kingdom, is a
+ 21st-century city with history stretching back to Roman times. At
+ its centre stand the imposing Houses of Parliament, the iconic Big
+ Ben clock tower and Westminster.
+
+
+
+
+
+
+
+ );
+};
+export default TouristInfoCards;
diff --git a/src/Utilities/OrderCalculation.js b/src/Utilities/OrderCalculation.js
new file mode 100644
index 000000000..03e9f8334
--- /dev/null
+++ b/src/Utilities/OrderCalculation.js
@@ -0,0 +1,16 @@
+// import React from "react";
+
+
+// const addOrder = () => {
+// setCount(count + 1);
+// };
+
+// const removeOrder = () => {
+// setCount(count - 1);
+// };
+
+// const setToZero = () => {
+// setCount((0));
+// }
+
+// export default Order;
\ No newline at end of file
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
new file mode 100644
index 000000000..8c052db84
--- /dev/null
+++ b/src/components/SearchResults.js
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import TableHead from "./TableHead";
+import TableBody from "./TableBody";
+import CustomerProfile from "../CustomerProfile";
+
+const SearchResults = ({ results, id }) => {
+ const [customerId, setCustomerId] = useState("");
+
+ function changeId(id) {
+ id > 0 && setCustomerId(id);
+ }
+console.log(customerId)
+ return (
+
+ );
+};
+
+export default SearchResults;
diff --git a/src/components/TableBody.js b/src/components/TableBody.js
new file mode 100644
index 000000000..4ccedb124
--- /dev/null
+++ b/src/components/TableBody.js
@@ -0,0 +1,17 @@
+import React from "react";
+
+import TableRow from "./TableRow";
+
+const TableBody = ({ bookings, changeId }) => {
+ return (
+
+ {bookings &&
+ bookings.length > 0 &&
+ bookings.map((booking) => (
+
+ );
+};
+
+export default TableBody;
diff --git a/src/components/TableHead.js b/src/components/TableHead.js
new file mode 100644
index 000000000..2b376e014
--- /dev/null
+++ b/src/components/TableHead.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+const TableHead = () => {
+
+
+ return (
+
+
+ Id
+ Title
+ First name
+ Surname
+ E-mail
+ Room id
+ Check-in date
+ Check-out date
+ No. of nights
+ Profile
+
+
+ );
+};
+
+export default TableHead;
diff --git a/src/components/TableRow.js b/src/components/TableRow.js
new file mode 100644
index 000000000..46a761092
--- /dev/null
+++ b/src/components/TableRow.js
@@ -0,0 +1,63 @@
+
+import react, {useState} from "react";
+import moment from "moment";
+const TableRow = ({ booking, changeId }) => {
+
+
+ const {
+ id,
+ title,
+ firstName,
+ surname,
+ email,
+ roomId,
+ checkInDate,
+ checkOutDate,
+ } = booking;
+
+ const numOfDays = (checkInDate, checkOutDate) => {
+ const checkIn = moment(checkInDate);
+ const checkOut = moment(checkOutDate);
+
+ return checkOut.diff(checkIn, "days");
+ };
+
+ const [highlight, sethighlight] = useState(false);
+ const handleColor = () => sethighlight(!highlight);
+
+ const handleClick = () => {
+ changeId(id);
+
+ console.log(id);
+
+ if (id) {
+ return console.log("handleClick clicked");
+ }
+ };
+
+ return (
+
+ {id}
+
+ {title}
+ {firstName}
+ {surname}
+ {email}
+ {roomId}
+ {checkInDate}
+ {checkOutDate}
+ {numOfDays(checkInDate, checkOutDate)}
+
+
+ Show profile
+
+
+
+ );
+};
+
+export default TableRow;
diff --git a/src/data/fakeBookings.json b/src/data/fakeBookings.json
index 2997792ea..da50bff3b 100644
--- a/src/data/fakeBookings.json
+++ b/src/data/fakeBookings.json
@@ -48,5 +48,15 @@
"roomId": 3,
"checkInDate": "2017-08-30",
"checkOutDate": "2017-10-02"
+ },
+ {
+ "id": 6,
+ "title": "Mrs",
+ "firstName": "Anuradha",
+ "surname": "smith",
+ "email": "anu@smith.net",
+ "roomId": 3,
+ "checkInDate": "2017-08-30",
+ "checkOutDate": "2017-10-02"
}
]
diff --git a/src/index.css b/src/index.css
index 4607bb217..a3d2de968 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,10 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
+ /* background-color: rgb(35, 38, 37);
+ color: aliceblue; */
+ /* font-family: fantasy; */
+
}
.search-wrapper {
*/}
+
+ {/* 
*/}
+ 
+
+ 
+
+ 
+