From 0d1b116fe3a4499213577685b429d1854c63ba02 Mon Sep 17 00:00:00 2001 From: Takiera Date: Tue, 13 Aug 2024 17:29:29 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D1=8B=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B2=D1=81=D0=B5=D1=85=20=D1=81=D1=82?= =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=86=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE?= =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- markup/main-empty.html | 4 +- src/components/app/app.tsx | 13 ++ src/components/card/card.tsx | 44 ++++ src/index.tsx | 7 +- src/pages/favorites-empty-page.tsx | 51 +++++ src/pages/favorites-page.tsx | 169 ++++++++++++++ src/pages/login-page.tsx | 43 ++++ src/pages/main-empty-page.tsx | 85 +++++++ src/pages/main-page.tsx | 117 ++++++++++ src/pages/offer-not-logged-page.tsx | 285 +++++++++++++++++++++++ src/pages/offer-page.tsx | 337 ++++++++++++++++++++++++++++ 11 files changed, 1152 insertions(+), 3 deletions(-) create mode 100644 src/components/app/app.tsx create mode 100644 src/components/card/card.tsx create mode 100644 src/pages/favorites-empty-page.tsx create mode 100644 src/pages/favorites-page.tsx create mode 100644 src/pages/login-page.tsx create mode 100644 src/pages/main-empty-page.tsx create mode 100644 src/pages/main-page.tsx create mode 100644 src/pages/offer-not-logged-page.tsx create mode 100644 src/pages/offer-page.tsx diff --git a/markup/main-empty.html b/markup/main-empty.html index dfac34d..a869d2a 100644 --- a/markup/main-empty.html +++ b/markup/main-empty.html @@ -97,6 +97,6 @@

Cities

- - + + diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx new file mode 100644 index 0000000..cf0014a --- /dev/null +++ b/src/components/app/app.tsx @@ -0,0 +1,13 @@ +import MainPage from '../../pages/main-page'; + +type AppProps = { + offersCount: number; +} + +export default function App({offersCount}: AppProps): JSX.Element { + return ( + + ); +} diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx new file mode 100644 index 0000000..a40e8f7 --- /dev/null +++ b/src/components/card/card.tsx @@ -0,0 +1,44 @@ +export default function Card() { + return ( + + ); +} diff --git a/src/index.tsx b/src/index.tsx index be81a6e..f850174 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,17 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import App from './components/app/app'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); +const Setting = { + OffercCount: 5, +} as const; + root.render( -

Hello, World!

+ ); diff --git a/src/pages/favorites-empty-page.tsx b/src/pages/favorites-empty-page.tsx new file mode 100644 index 0000000..510c0fe --- /dev/null +++ b/src/pages/favorites-empty-page.tsx @@ -0,0 +1,51 @@ +export default function FavoritesEmptyPage(): JSX.Element { + return ( +
+
+
+ +
+
+ +
+
+
+

Favorites (empty)

+
+ Nothing yet saved. +

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

+
+
+
+
+ +
+ ); +} diff --git a/src/pages/favorites-page.tsx b/src/pages/favorites-page.tsx new file mode 100644 index 0000000..414db8d --- /dev/null +++ b/src/pages/favorites-page.tsx @@ -0,0 +1,169 @@ +export default function FavoritesPage(): JSX.Element { + return ( +
+
+
+ +
+
+ +
+
+
+

Saved listing

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

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+
+ ); +} diff --git a/src/pages/main-empty-page.tsx b/src/pages/main-empty-page.tsx new file mode 100644 index 0000000..1b83297 --- /dev/null +++ b/src/pages/main-empty-page.tsx @@ -0,0 +1,85 @@ +export default function MainEmptyPage(): JSX.Element { + return ( +
+
+
+ +
+
+ +
+

Cities

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

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

+
+
+
+
+
+
+
+ ); +} diff --git a/src/pages/main-page.tsx b/src/pages/main-page.tsx new file mode 100644 index 0000000..08f5009 --- /dev/null +++ b/src/pages/main-page.tsx @@ -0,0 +1,117 @@ +import { ReactNode } from 'react'; +import Card from '../components/card/card'; + +type MainPageProps = { + offersCount: number; +} + +export default function MainPage ({offersCount}: MainPageProps): JSX.Element { + const elements: ReactNode[] = []; + + + for (let i = 0; i < offersCount; i++) { + elements.push(); + } + + return ( +
+
+ +
+ +
+

Cities

+ +
+
+
+

Places

+ 312 places to stay in Amsterdam +
+ Sort by + + Popular + + + + +
    +
  • Popular
    • +
  • Price: low to high
    • +
  • Price: high to low
    • +
  • Top rated first
    • +
+
+
+ {elements} +
+
+
+
+
+
+
+
+
+ ); +} diff --git a/src/pages/offer-not-logged-page.tsx b/src/pages/offer-not-logged-page.tsx new file mode 100644 index 0000000..a747640 --- /dev/null +++ b/src/pages/offer-not-logged-page.tsx @@ -0,0 +1,285 @@ +export default 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

+
+ + + + + +
+
+
+
+
+ ); +} diff --git a/src/pages/offer-page.tsx b/src/pages/offer-page.tsx new file mode 100644 index 0000000..5cdb1cd --- /dev/null +++ b/src/pages/offer-page.tsx @@ -0,0 +1,337 @@ +export default 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. +

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

+ To submit review please make sure to set rating and describe your stay with at least 50 characters. +

+ +
+
+
+
+
+
+
+
+
+

Other places in the neighbourhood

+
+ + + + + +
+
+
+
+
+ ); +}