From 873523bb942649ddef6f84fccf910d471cd88ff8 Mon Sep 17 00:00:00 2001 From: ktvtk Date: Wed, 23 Oct 2024 12:25:45 +0500 Subject: [PATCH] hw2 --- src/components/app/app.tsx | 9 + src/components/place-card.tsx | 50 +++ src/index.tsx | 3 +- .../favorites-screen/favorite-screen.tsx | 171 +++++++++ src/pages/login-screen/login-screen.tsx | 45 +++ src/pages/main-screen/main-screen.tsx | 112 ++++++ src/pages/offer-screen/offer-screen.tsx | 339 ++++++++++++++++++ src/props/main-screen-props.ts | 3 + src/props/place-card-props.ts | 14 + 9 files changed, 745 insertions(+), 1 deletion(-) create mode 100644 src/components/app/app.tsx create mode 100644 src/components/place-card.tsx create mode 100644 src/pages/favorites-screen/favorite-screen.tsx create mode 100644 src/pages/login-screen/login-screen.tsx create mode 100644 src/pages/main-screen/main-screen.tsx create mode 100644 src/pages/offer-screen/offer-screen.tsx create mode 100644 src/props/main-screen-props.ts create mode 100644 src/props/place-card-props.ts diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx new file mode 100644 index 0000000..c6f2038 --- /dev/null +++ b/src/components/app/app.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import {MainScreen} from '../../pages/main-screen/main-screen.tsx'; +import {MainScreenProps} from '../../props/main-screen-props.ts'; + +export function App({placeCount}: MainScreenProps): React.JSX.Element { + return ( + + ); +} diff --git a/src/components/place-card.tsx b/src/components/place-card.tsx new file mode 100644 index 0000000..441d860 --- /dev/null +++ b/src/components/place-card.tsx @@ -0,0 +1,50 @@ +import {JSX} from 'react'; +import {PlaceCardProps} from '../props/place-card-props.ts'; + +export function PlaceCard({ + image, + price, + description, + rating, + type, + isPremium, + isInBookmarks +}: PlaceCardProps): JSX.Element { + return ( +
+ {isPremium && +
+ Premium +
} +
+ + Place image + +
+
+
+
+ €{price} + / night +
+ +
+
+
+ + Rating +
+
+

+ {description} +

+

{type}

+
+
+ ); +} diff --git a/src/index.tsx b/src/index.tsx index be81a6e..c013fe9 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/app.tsx'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -7,6 +8,6 @@ const root = ReactDOM.createRoot( root.render( -

Hello, World!

+ ); diff --git a/src/pages/favorites-screen/favorite-screen.tsx b/src/pages/favorites-screen/favorite-screen.tsx new file mode 100644 index 0000000..8e94b5e --- /dev/null +++ b/src/pages/favorites-screen/favorite-screen.tsx @@ -0,0 +1,171 @@ +import {JSX} from 'react'; + +export function FavoriteScreen() : JSX.Element { + return ( +
+
+
+ +
+
+ +
+
+
+

Saved listing

+ +
+
+
+ +
+ ); +} diff --git a/src/pages/login-screen/login-screen.tsx b/src/pages/login-screen/login-screen.tsx new file mode 100644 index 0000000..8f5748e --- /dev/null +++ b/src/pages/login-screen/login-screen.tsx @@ -0,0 +1,45 @@ +import {JSX} from 'react'; + +export function LoginScreen() : JSX.Element { + return ( +
+
+
+
+
+ + 6 cities logo + +
+
+
+
+ +
+
+
+

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+
+ ); +} diff --git a/src/pages/main-screen/main-screen.tsx b/src/pages/main-screen/main-screen.tsx new file mode 100644 index 0000000..78ae165 --- /dev/null +++ b/src/pages/main-screen/main-screen.tsx @@ -0,0 +1,112 @@ +import {JSX} from 'react'; +import {PlaceCard} from '../../components/place-card.tsx'; +import {PlaceType} from '../../props/place-card-props.ts'; +import {MainScreenProps} from '../../props/main-screen-props.ts'; + +export function MainScreen({placeCount}: MainScreenProps): JSX.Element { + return ( +
+
+
+ +
+
+ +
+

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/offer-screen/offer-screen.tsx b/src/pages/offer-screen/offer-screen.tsx new file mode 100644 index 0000000..79c265a --- /dev/null +++ b/src/pages/offer-screen/offer-screen.tsx @@ -0,0 +1,339 @@ +import {JSX} from 'react'; + +export function OfferScreen() : 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

+
+ + + + + +
+
+
+
+
+ ); +} diff --git a/src/props/main-screen-props.ts b/src/props/main-screen-props.ts new file mode 100644 index 0000000..181f64b --- /dev/null +++ b/src/props/main-screen-props.ts @@ -0,0 +1,3 @@ +export type MainScreenProps = { + placeCount: number; +} diff --git a/src/props/place-card-props.ts b/src/props/place-card-props.ts new file mode 100644 index 0000000..194608c --- /dev/null +++ b/src/props/place-card-props.ts @@ -0,0 +1,14 @@ +export type PlaceCardProps = { + image: string; + price: number; + description: string; + rating: string; + type: PlaceType; + isPremium?: boolean; + isInBookmarks?: boolean; +} + +export enum PlaceType { + Apartment = 'Apartment', + Room = 'Room', +}