diff --git a/package-lock.json b/package-lock.json index 0c1c491..df034c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "cyf-react-hotel", "version": "0.0.0", "dependencies": { + "dayjs": "^1.11.10", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -2028,6 +2029,11 @@ "url": "https://opencollective.com/date-fns" } }, + "node_modules/dayjs": { + "version": "1.11.10", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", + "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index 1fc32f7..64d2226 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "test:watch": "vitest" }, "dependencies": { + "dayjs": "^1.11.10", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index 7035044..78e96b5 100644 --- a/src/components/App/App.jsx +++ b/src/components/App/App.jsx @@ -1,12 +1,31 @@ import Bookings from "@/components/Bookings/Bookings.jsx"; import "./App.scss"; +import Footer from "../Footer/Footer"; +import Deck from "../Deck/Deck"; +import AppHeader from "../AppHeader/AppHeader"; +import Restaurant from "../Restaurant/Restaurant"; const App = () => (
-
-

CYF Hotel

-
+
+
+

CYF Hotel

+
+ +
+ + + + +
); diff --git a/src/components/App/App.scss b/src/components/App/App.scss index 69b6530..a8bab3d 100644 --- a/src/components/App/App.scss +++ b/src/components/App/App.scss @@ -1,8 +1,27 @@ -.app { -} .app { display: grid; + grid-template-rows: auto 1fr auto; /* Set up three rows - header, content, footer */ max-width: var(--space--container); margin: auto; padding: var(--space--gap); + min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */ +} + +.app__header { + background-color: var(--color--paper); + padding: var(--space--m); +} + +.app__heading { + margin: 0; + margin-top: 30%; +} + +.restaurant { + margin-bottom: 20px; +} + +.footer { + background-color: var(--color--paper); + padding: var(--space--m); } diff --git a/src/components/AppHeader/AppHeader.jsx b/src/components/AppHeader/AppHeader.jsx index 7007442..7503605 100644 --- a/src/components/AppHeader/AppHeader.jsx +++ b/src/components/AppHeader/AppHeader.jsx @@ -1,6 +1,4 @@ -// import Logo from "@/assets/spa-logo.png"; -// import "./AppHeader.scss"; -// const AppHeader = () => ( -// what goes in here? there is no content in the AppHeader component -// ); -// export default AppHeader; +import Logo from "@/assets/spa-logo.png"; +import "./AppHeader.scss"; +const AppHeader = () => ; +export default AppHeader; diff --git a/src/components/AppHeader/AppHeader.scss b/src/components/AppHeader/AppHeader.scss index 8885c6c..d8bbaf5 100644 --- a/src/components/AppHeader/AppHeader.scss +++ b/src/components/AppHeader/AppHeader.scss @@ -7,3 +7,16 @@ max-width: 100px; } } + +.header { + margin-right: 35%; + margin-left: 35%; + display: flex; + flex-direction: row-reverse; + justify-content: space-evenly; +} + +.LogoImg { + height: 150px; + width: 150px; +} diff --git a/src/components/Bookings/Bookings.jsx b/src/components/Bookings/Bookings.jsx index 5db6972..a10c3af 100644 --- a/src/components/Bookings/Bookings.jsx +++ b/src/components/Bookings/Bookings.jsx @@ -1,8 +1,15 @@ +import React, { useState } from 'react'; import Search from "@/components/Search/Search"; +import SearchResult from "../SearchResult/SearchResult"; +import FakeBookings from '@/data/fakeBookings.json'; + // import SearchResults from "@/componentsSearchResults.js"; // import FakeBookings from "@/data/fakeBookings.json"; const Bookings = () => { + + const [bookings, setBookings] = useSatet(FakeBookings); + const search = (searchVal) => { console.info("TO DO!", searchVal); }; @@ -10,7 +17,7 @@ const Bookings = () => { return (
- {/* */} +
); }; diff --git a/src/components/Bookings/Bookings.test.jsx b/src/components/Bookings/Bookings.test.jsx index 69e294f..dd9d344 100644 --- a/src/components/Bookings/Bookings.test.jsx +++ b/src/components/Bookings/Bookings.test.jsx @@ -1,11 +1,11 @@ -import { describe, it, expect } from "vitest"; -import { render, screen } from "@testing-library/react"; -import Bookings from "./Bookings.jsx"; +import { describe, it, expect } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import Bookings from './Bookings.jsx'; -describe("Bookings Component", () => { - it("renders a main element", () => { +describe('Bookings Component', () => { + it('renders a main element', () => { render(); - const mainElement = screen.getByRole("main"); + const mainElement = screen.getByRole('main'); expect(mainElement).toBeInTheDocument(); }); }); diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index b93f799..f8c6c20 100644 --- a/src/components/Card/Card.jsx +++ b/src/components/Card/Card.jsx @@ -1,9 +1,18 @@ -// import "./Card.scss"; +import React from "react"; +import "./Card.scss"; -// const Card = ({ title, url, image }) => { -// return ( +const Card = (props) => { + const { title, url, image } = props; + return ( +
+

{title}

+ {title} -// ); -// }; + {title} -// export default Card; + +
+ ); +}; + +export default Card; diff --git a/src/components/Deck/Deck.jsx b/src/components/Deck/Deck.jsx index 9760d2b..c9215bc 100644 --- a/src/components/Deck/Deck.jsx +++ b/src/components/Deck/Deck.jsx @@ -1,11 +1,20 @@ -// import Card from "@/components/Card/Card"; -// import "./Deck.scss"; -// import cardsData from "@/data/fakeCards.json"; +import Card from "@/components/Card/Card"; +import "./Deck.scss"; +import cardsData from "@/data/fakeCards.json"; -// const Deck = () => { -// you will need to map over the cardsData array and render a Card component for each card object -// how will you pass props to the Card component? +const Deck = (props) => { + return ( +
+ {cardsData.map((city, index) => ( + + ))} +
+ ); +}; -// }; - -// export default Deck; +export default Deck; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx new file mode 100644 index 0000000..83a8357 --- /dev/null +++ b/src/components/Footer/Footer.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import "./Footer.scss" + +export default function Footer(props) { + return ( + <> + + + ); +} diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 0000000..0348a0d --- /dev/null +++ b/src/components/Footer/Footer.scss @@ -0,0 +1,5 @@ +.footer { + margin-top: auto; + background-color: var(--color--paper); + padding: var(--space--m); +} \ No newline at end of file diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx index 378b963..6c2a5b5 100644 --- a/src/components/Restaurant/Restaurant.jsx +++ b/src/components/Restaurant/Restaurant.jsx @@ -1,16 +1,25 @@ -const Restaurant = () => { - const pizzas = 0; +import { useState } from "react"; + +function Restaurant() { + const [pizzas, setPizzas] = useState(0); + + function buttonAdd() { + setPizzas(pizzas + 1); + } + return (

Restaurant Orders

); -}; +} export default Restaurant; diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index eb19775..9ee9aff 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -1,4 +1,5 @@ import "./Search.scss"; +import SearchButton from "../SearchButton/SearchButton"; const Search = () => (
@@ -15,7 +16,7 @@ const Search = () => ( className="search__input" placeholder="Customer name" /> - +
); diff --git a/src/components/SearchButton/SearchButton.jsx b/src/components/SearchButton/SearchButton.jsx index 8b13789..1284b96 100644 --- a/src/components/SearchButton/SearchButton.jsx +++ b/src/components/SearchButton/SearchButton.jsx @@ -1 +1,7 @@ +import React from "react"; +const SearchButton = () => { + return ; +}; + +export default SearchButton; diff --git a/src/components/SearchResult/SearchResult.jsx b/src/components/SearchResult/SearchResult.jsx new file mode 100644 index 0000000..825e1d3 --- /dev/null +++ b/src/components/SearchResult/SearchResult.jsx @@ -0,0 +1,42 @@ +import "./SearchResult.scss"; +import FakeBookings from "@/data/fakeBookings.json"; +import TableBody from "./TableBody"; +import TableHead from "./TableHead"; +import dayjs from "dayjs"; + +const Bookings = FakeBookings; +function SearchResult() { + return ( + + + + + + {Bookings.map((book) => { + const stayNightsTotal = dayjs(book.checkOutDate).diff( + dayjs(book.checkInDate), + "day" + ); + return ( + <> + + + ); + })} + +
+ ); +} +export default SearchResult; +console.log(SearchResult()); diff --git a/src/components/SearchResult/SearchResult.scss b/src/components/SearchResult/SearchResult.scss new file mode 100644 index 0000000..e68e6aa --- /dev/null +++ b/src/components/SearchResult/SearchResult.scss @@ -0,0 +1,19 @@ +table { + border-collapse: collapse; + width: 100%; +} + +thead { + background-color: #f2f2f2; +} + +th, +td { + padding: 8px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + font-weight: bold; +} diff --git a/src/components/SearchResult/TableBody.jsx b/src/components/SearchResult/TableBody.jsx new file mode 100644 index 0000000..c690b0c --- /dev/null +++ b/src/components/SearchResult/TableBody.jsx @@ -0,0 +1,33 @@ +// import FakeBookings from "@/data/fakeBookings.json"; + +function TableBody(props) { + let { + id, + title, + name, + firstName, + surName, + email, + roomId, + checkInDate, + checkOutDate, + stayNights, + } = props; + return ( + <> + + {id} + {title} + {firstName} + {surName} + {email} + {roomId} + {checkInDate} + {checkOutDate} + {stayNights} + + + ); +} + +export default TableBody; diff --git a/src/components/SearchResult/TableHead.jsx b/src/components/SearchResult/TableHead.jsx new file mode 100644 index 0000000..9afda64 --- /dev/null +++ b/src/components/SearchResult/TableHead.jsx @@ -0,0 +1,18 @@ +function TableHead() { + return ( + <> + + ID + Title + First name + Lastname + Email + Room id + Check in date + Check out date + Total Nights to Stay + + + ); +} +export default TableHead; diff --git a/src/data/fakeCards.json b/src/data/fakeCards.json index f8e5dfa..e29dfec 100644 --- a/src/data/fakeCards.json +++ b/src/data/fakeCards.json @@ -2,16 +2,16 @@ { "title": "Glasgow", "url": "https://peoplemakeglasgow.com", - "image": "placeholderImage.svg" + "image": "https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2023/04/06/queens-park" }, { "title": "Manchester", "url": "https://visitmanchester.com", - "image": "placeholderImage.svg" + "image": "https://media.wired.co.uk/photos/6357b98e09e6f1942a2a8a9a/16:9/w_1920,c_limit/HSBC%20MANCHESTER.jpeg" }, { "title": "London", "url": "https://visitlondon.com", - "image": "placeholderImage.svg" + "image": "https://media.istockphoto.com/id/1347665170/photo/london-at-sunset.jpg?s=1024x1024&w=is&k=20&c=ogVKCS26t23fSvgCO77CC_6mhtxMDk2cmBOUQ9VamYo=" } ] diff --git a/src/main.jsx b/src/main.jsx index 1e57698..811364e 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -3,6 +3,9 @@ import ReactDOM from "react-dom/client"; import App from "@/components/App/App.jsx"; import "./index.css"; + + + ReactDOM.createRoot(document.getElementById("root")).render(