diff --git a/package.json b/package.json index d1d0ee6..57b9901 100644 --- a/package.json +++ b/package.json @@ -58,5 +58,6 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/DataTypes/RoomType.ts b/src/DataTypes/RoomType.ts new file mode 100644 index 0000000..86c0b35 --- /dev/null +++ b/src/DataTypes/RoomType.ts @@ -0,0 +1,4 @@ +export enum RoomType { + Apartment = 'Apartment', + Room = 'Room', +} diff --git a/src/Pages/FavoritesPage.tsx b/src/Pages/FavoritesPage.tsx new file mode 100644 index 0000000..38491fb --- /dev/null +++ b/src/Pages/FavoritesPage.tsx @@ -0,0 +1,169 @@ +export function FavoritesPage(): React.JSX.Element { + return ( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+ +
+
+
+

Saved listing

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

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+
+ + Amsterdam + +
+
+
+
+
+ ); +} diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx new file mode 100644 index 0000000..5bfefde --- /dev/null +++ b/src/Pages/MainPage.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import {PlaceCard} from '../components/PlaceCard.tsx'; +import {RoomType} from '../DataTypes/RoomType.ts'; + +interface MainPageProps { + placeCount: number; +} + +export function MainPage({placeCount}: MainPageProps): React.JSX.Element { + return ( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+ +
+

Cities

+
+
+ +
+
+
+
+
+

Places

+ {placeCount} places to stay in Amsterdam +
+ Sort by + + Popular + + + + +
    +
  • Popular
    • +
  • Price: low to high
    • +
  • Price: high to low
    • +
  • Top rated first
    • +
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+ ); +} diff --git a/src/Pages/OfferPage.tsx b/src/Pages/OfferPage.tsx new file mode 100644 index 0000000..19d78bc --- /dev/null +++ b/src/Pages/OfferPage.tsx @@ -0,0 +1,341 @@ +export function OfferPage(): React.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. +

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

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

+ +
+
+
+
+
+
+
+
+
+

Other places in the neighbourhood

+
+ + + + + +
+
+
+
+
+ ); +} diff --git a/src/components/App.tsx b/src/components/App.tsx new file mode 100644 index 0000000..15329c2 --- /dev/null +++ b/src/components/App.tsx @@ -0,0 +1,12 @@ +import {MainPage} from '../Pages/MainPage.tsx'; +import React from 'react'; + +interface AppProps { + placeCount: number; +} + +export function App({placeCount}: AppProps): React.JSX.Element { + return ( + + ); +} diff --git a/src/components/PlaceCard.tsx b/src/components/PlaceCard.tsx new file mode 100644 index 0000000..f308086 --- /dev/null +++ b/src/components/PlaceCard.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import {RoomType} from '../DataTypes/RoomType.ts'; + +interface PlaceCardProps { + price: number; + type: RoomType; + image: string; + description: string; + isPremium?: boolean; + isInBookmarks?: boolean; +} + + +export function PlaceCard({ + price, + type, + image, + description, + isPremium, + isInBookmarks +}: PlaceCardProps): React.JSX.Element { + return ( +
+ {isPremium && +
+ Premium +
} +
+ + Place image + +
+
+
+
+ €{price} + / night +
+ +
+
+
+ + Rating +
+
+

+ {description} +

+

{type}

+
+
+ ); +} diff --git a/src/index.tsx b/src/index.tsx index be81a6e..2b57d7a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import {App} from './components/App.tsx'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -7,6 +8,6 @@ const root = ReactDOM.createRoot( root.render( -

Hello, World!

+ );