From b57659a7b545631ac2b297e555a6a31b6499ef7a Mon Sep 17 00:00:00 2001 From: VartoS Date: Sun, 29 Sep 2024 19:08:07 +0500 Subject: [PATCH] =?UTF-8?q?module2-task1:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?= =?UTF-8?q?=20=D0=BA=D0=B0=D0=BA=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 +- src/consts.ts | 4 +- .../FavoritesPage/FavoritesEmptyPage.tsx | 70 +++ src/pages/FavoritesPage/FavoritesPage.tsx | 229 +++++++++ src/pages/Login/LoginPage.tsx | 67 +++ src/pages/MainPage/MainPage.tsx | 51 +- src/pages/MainPage/MainPageEmpty.tsx | 102 ++++ src/pages/MainPage/OfferCard.tsx | 10 +- src/pages/Offer/OfferNotLoggedPage.tsx | 359 +++++++++++++ src/pages/Offer/OfferPage.tsx | 478 ++++++++++++++++++ 10 files changed, 1345 insertions(+), 29 deletions(-) create mode 100644 src/pages/FavoritesPage/FavoritesEmptyPage.tsx create mode 100644 src/pages/FavoritesPage/FavoritesPage.tsx create mode 100644 src/pages/Login/LoginPage.tsx create mode 100644 src/pages/MainPage/MainPageEmpty.tsx create mode 100644 src/pages/Offer/OfferNotLoggedPage.tsx create mode 100644 src/pages/Offer/OfferPage.tsx diff --git a/src/App.tsx b/src/App.tsx index 2054a5d..905f92f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,8 +2,8 @@ import React from 'react'; import MainPage from './pages/MainPage/MainPage'; type AppScreenProps = { - rentalOffersCount: number -} + rentalOffersCount: number; +}; function App(props: AppScreenProps): JSX.Element { return ( diff --git a/src/consts.ts b/src/consts.ts index ce96c91..d23016d 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,3 +1,3 @@ export const Settings = { - rentalOffersCount: 312 -} \ No newline at end of file + rentalOffersCount: 312, +}; diff --git a/src/pages/FavoritesPage/FavoritesEmptyPage.tsx b/src/pages/FavoritesPage/FavoritesEmptyPage.tsx new file mode 100644 index 0000000..bfbc224 --- /dev/null +++ b/src/pages/FavoritesPage/FavoritesEmptyPage.tsx @@ -0,0 +1,70 @@ +function FavoritesEmptyPage(): JSX.Element { + return ( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+
+
+
+

Favorites (empty)

+
+ Nothing yet saved. +

+ Save properties to narrow down search or plan your future trips. +

+
+
+
+
+ +
+ ); +} + +export default FavoritesEmptyPage; diff --git a/src/pages/FavoritesPage/FavoritesPage.tsx b/src/pages/FavoritesPage/FavoritesPage.tsx new file mode 100644 index 0000000..6909486 --- /dev/null +++ b/src/pages/FavoritesPage/FavoritesPage.tsx @@ -0,0 +1,229 @@ +function FavoritesPage(): JSX.Element { + return ( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+
+
+
+

Saved listing

+ +
+
+
+ +
+ ); +} + +export default FavoritesPage; diff --git a/src/pages/Login/LoginPage.tsx b/src/pages/Login/LoginPage.tsx new file mode 100644 index 0000000..293e3df --- /dev/null +++ b/src/pages/Login/LoginPage.tsx @@ -0,0 +1,67 @@ +function LoginPage(): JSX.Element { + return ( +
+
+
+
+
+ + 6 cities logo + +
+
+
+
+
+
+
+

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+
+ ); +} + +export default LoginPage; diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx index 12cb1c9..6e26c11 100644 --- a/src/pages/MainPage/MainPage.tsx +++ b/src/pages/MainPage/MainPage.tsx @@ -1,8 +1,8 @@ import OfferCard from './OfferCard'; type MainPageProps = { - rentalOffersCount: number -} + rentalOffersCount: number; +}; function MainPage(props: MainPageProps): JSX.Element { return ( @@ -87,7 +87,9 @@ function MainPage(props: MainPageProps): JSX.Element {

Places

- {props.rentalOffersCount} places to stay in Amsterdam + + {props.rentalOffersCount} places to stay in Amsterdam +
Sort by @@ -115,46 +117,51 @@ function MainPage(props: MainPageProps): JSX.Element {
- - + - + - + - + + cardName={'Wood and stone place'} + imgPath={'img/room.jpg'} + />
diff --git a/src/pages/MainPage/MainPageEmpty.tsx b/src/pages/MainPage/MainPageEmpty.tsx new file mode 100644 index 0000000..a4db302 --- /dev/null +++ b/src/pages/MainPage/MainPageEmpty.tsx @@ -0,0 +1,102 @@ +function MainPageEmpty(): JSX.Element { + return ( +
+
+ +
+
+

Cities

+ +
+
+
+
+ No places to stay available +

+ We could not find any property available at the moment in + Dusseldorf +

+
+
+
+
+
+
+
+ ); +} + +export default MainPageEmpty; diff --git a/src/pages/MainPage/OfferCard.tsx b/src/pages/MainPage/OfferCard.tsx index 39d118f..87aceef 100644 --- a/src/pages/MainPage/OfferCard.tsx +++ b/src/pages/MainPage/OfferCard.tsx @@ -34,14 +34,18 @@ function OfferCard(props: OfferCardProps): JSX.Element { / night
@@ -49,7 +53,7 @@ function OfferCard(props: OfferCardProps): JSX.Element {
Rating diff --git a/src/pages/Offer/OfferNotLoggedPage.tsx b/src/pages/Offer/OfferNotLoggedPage.tsx new file mode 100644 index 0000000..5610c72 --- /dev/null +++ b/src/pages/Offer/OfferNotLoggedPage.tsx @@ -0,0 +1,359 @@ +function OfferNotLoggedPage(): JSX.Element { + return ( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+
+
+
+
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+
+
+
+
+ Premium +
+
+

+ Beautiful & luxurious studio at great location +

+ +
+
+
+ + Rating +
+ 4.8 +
+
    +
  • + Apartment +
    • +
  • + 3 Bedrooms +
    • +
  • + Max 4 adults +
    • +
+
+ €120 +  night +
+
+

What's inside

+
    +
  • Wi-Fi
    • +
  • Washing machine
    • +
  • Towels
    • +
  • Heating
    • +
  • Coffee machine
    • +
  • Baby seat
    • +
  • Kitchen
    • +
  • Dishwasher
    • +
  • Cabel TV
    • +
  • Fridge
    • +
+
+
+

Meet the host

+
+
+ Host avatar +
+ Angelina + Pro +
+
+

+ A quiet cozy and picturesque that hides behind a a river by + the unique lightness of Amsterdam. The building is green and + from 18th century. +

+

+ An independent House, strategically located between Rembrand + Square and National Opera, but where the bustle of the city + comes to rest in this alley flowery and colorful. +

+
+
+
+

+ Reviews · 1 +

+
    +
  • +
    +
    + Reviews avatar +
    + Max +
    +
    +
    +
    + + Rating +
    +
    +

    + A quiet cozy and picturesque that hides behind a a river + by the unique lightness of Amsterdam. The building is + green and from 18th century. +

    + +
    +
    • +
+
+
+
+
+
+
+
+

+ Other places in the neighbourhood +

+
+
+
+ + Place image + +
+
+
+
+ €80 + + / night + +
+ +
+
+
+ + Rating +
+
+

+ Wood and stone place +

+

Room

+
+
+ + +
+
+
+
+
+ ); +} + +export default OfferNotLoggedPage; diff --git a/src/pages/Offer/OfferPage.tsx b/src/pages/Offer/OfferPage.tsx new file mode 100644 index 0000000..ac2a941 --- /dev/null +++ b/src/pages/Offer/OfferPage.tsx @@ -0,0 +1,478 @@ +function OfferPage(): JSX.Element { + return ( +
+
+ +
+
+
+
+
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+
+
+
+
+ Premium +
+
+

+ Beautiful & luxurious studio at great location +

+ +
+
+
+ + Rating +
+ 4.8 +
+
    +
  • + Apartment +
    • +
  • + 3 Bedrooms +
    • +
  • + Max 4 adults +
    • +
+
+ €120 +  night +
+
+

What's inside

+
    +
  • Wi-Fi
    • +
  • Washing machine
    • +
  • Towels
    • +
  • Heating
    • +
  • Coffee machine
    • +
  • Baby seat
    • +
  • Kitchen
    • +
  • Dishwasher
    • +
  • Cabel TV
    • +
  • Fridge
    • +
+
+
+

Meet the host

+
+
+ Host avatar +
+ Angelina + Pro +
+
+

+ A quiet cozy and picturesque that hides behind a a river by + the unique lightness of Amsterdam. The building is green and + from 18th century. +

+

+ An independent House, strategically located between Rembrand + Square and National Opera, but where the bustle of the city + comes to rest in this alley flowery and colorful. +

+
+
+
+

+ Reviews · 1 +

+
    +
  • +
    +
    + Reviews avatar +
    + Max +
    +
    +
    +
    + + Rating +
    +
    +

    + A quiet cozy and picturesque that hides behind a a river + by the unique lightness of Amsterdam. The building is + green and from 18th century. +

    + +
    +
    • +
+
+ +
+ + + + + + + + + + +
+