diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx new file mode 100644 index 0000000..ad277ac --- /dev/null +++ b/src/components/app/app.tsx @@ -0,0 +1,13 @@ +import MainPage from '../../pages/main-page/main-page.tsx'; + +type AppProps = { + placeCardCount: number; +} + +function App({ placeCardCount }: AppProps): JSX.Element { + return ( + + ); +} + +export default App; diff --git a/src/components/place-card/place-card.tsx b/src/components/place-card/place-card.tsx new file mode 100644 index 0000000..0043a88 --- /dev/null +++ b/src/components/place-card/place-card.tsx @@ -0,0 +1,40 @@ +function PlaceCard(): JSX.Element { + return ( +
+
+ Premium +
+
+ + Place image + +
+
+
+
+ €120 + / night +
+ +
+
+
+ + Rating +
+
+

+ Beautiful & luxurious apartment at great location +

+

Apartment

+
+
+ ); +} + +export default PlaceCard; diff --git a/src/const.ts b/src/const.ts new file mode 100644 index 0000000..bc15f25 --- /dev/null +++ b/src/const.ts @@ -0,0 +1,3 @@ +export const Setting = { + PlaceCardCount: 5 +}; diff --git a/src/index.tsx b/src/index.tsx index be81a6e..8781e4f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import App from './components/app/app.tsx'; +import { Setting } from './const.ts'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -7,6 +9,6 @@ const root = ReactDOM.createRoot( root.render( -

Hello, World!

+ ); diff --git a/src/pages/favorites-page/favorites-page.tsx b/src/pages/favorites-page/favorites-page.tsx new file mode 100644 index 0000000..4e483f2 --- /dev/null +++ b/src/pages/favorites-page/favorites-page.tsx @@ -0,0 +1,171 @@ +function FavoritesPage() { + return ( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+ +
+
+
+

Saved listing

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

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+
+ ); +} + +export default LoginPage; diff --git a/src/pages/main-page/main-page.tsx b/src/pages/main-page/main-page.tsx new file mode 100644 index 0000000..f8a843d --- /dev/null +++ b/src/pages/main-page/main-page.tsx @@ -0,0 +1,113 @@ +import PlaceCard from '../../components/place-card/place-card.tsx'; + +type MainPageProps = { + placeCardCount: number; +}; + +function MainPage({ placeCardCount }: MainPageProps) { + const placeCards = Array.from({ length: placeCardCount }, (_, index) => index); + + return ( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+ +
+

Cities

+
+
+ +
+
+
+
+
+

Places

+ 312 places to stay in Amsterdam +
+ Sort by + + Popular + + + + +
    +
  • Popular
    • +
  • Price: low to high
    • +
  • Price: high to low
    • +
  • Top rated first
    • +
+
+
+ { placeCards.map((index) => )} +
+
+
+
+
+
+
+
+
+ ); +} + +export default MainPage; diff --git a/src/pages/offer-page/offer-page.tsx b/src/pages/offer-page/offer-page.tsx new file mode 100644 index 0000000..1c91c55 --- /dev/null +++ b/src/pages/offer-page/offer-page.tsx @@ -0,0 +1,343 @@ +function OfferPage() { + 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. +

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

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

+ +
+
+
+
+
+
+
+
+
+

Other places in the neighbourhood

+
+ + + + + +
+
+
+
+
+ ); +} + +export default OfferPage;