From 2ee2b605b5b650664f146fadc8f46de1a9b129ce Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Sat, 5 Oct 2024 21:54:28 +0300 Subject: [PATCH 1/4] Task2 --- src/components/MainPage/MainPage.tsx | 109 +++++++++++++++++++++++++++ src/components/MainPageCard/Card.tsx | 40 ++++++++++ src/index.tsx | 54 ++++++++++++- 3 files changed, 202 insertions(+), 1 deletion(-) create mode 100644 src/components/MainPage/MainPage.tsx create mode 100644 src/components/MainPageCard/Card.tsx diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx new file mode 100644 index 0000000..70e910a --- /dev/null +++ b/src/components/MainPage/MainPage.tsx @@ -0,0 +1,109 @@ +import Card from '../MainPageCard/Card.tsx'; +import {cardProperties} from '../../src/index.tsx'; +function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{ + return( +
+
+
+
+
+ + 6 cities logo + +
+ +
+
+
+ +
+

Cities

+
+
+ +
+
+
+
+
+

Places

+ {CardProps[0].NumberOfPlaces} places to stay in Amsterdam +
+ Sort by + + Popular + + + + +
    +
  • Popular
    • +
  • Price: low to high
    • +
  • Price: high to low
    • +
  • Top rated first
    • +
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ ); +} +export default MainPage; diff --git a/src/components/MainPageCard/Card.tsx b/src/components/MainPageCard/Card.tsx new file mode 100644 index 0000000..9d90e7a --- /dev/null +++ b/src/components/MainPageCard/Card.tsx @@ -0,0 +1,40 @@ + +function Card(MainPageCardProps:cardProperties):JSX.Element{ + return( +
+ {MainPageCardProps.Premium ? +
+ Premium +
: null} +
+ + Place image + +
+
+
+
+ €{MainPageCardProps.Price} + / night +
+ +
+
+
+ + Rating +
+
+

+ {MainPageCardProps.Description} +

+

{MainPageCardProps.ApartsmentType}

+
+
); +} +export default Card; diff --git a/src/index.tsx b/src/index.tsx index be81a6e..99250b6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,64 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import App from './components/MainPage/MainPage'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); +type cardProperties={ + Premium:boolean; + Price:number; + Img:string; + ApartsmentType:string; + Description:string; + NumberOfPlaces?:number; +}; +export type {cardProperties}; + +const mainPageCardInfo:cardProperties[] = [ + { + Premium:true, + Price:120, + Img:'../markup/Img/apartment-01.jpg', + ApartsmentType:'Apartment', + Description:'Beautiful & luxurious apartment at great location', + NumberOfPlaces:132 + }, + { + Premium:false, + Price:80, + Img:'../markup/Img/room.jpg', + ApartsmentType:'Room', + Description:'Wood and stone place', + }, + + { + Premium:false, + Price:132, + Img:'../markup/Img/apartment-02.jpg', + ApartsmentType:'Apartment', + Description:'Canal View Prinsengracht', + }, + + { + Premium:true, + Price:180, + Img:'../markup/Img/apartment-03.jpg', + ApartsmentType:'Apartment', + Description:'Nice, cozy, warm big bed apartment', + }, + + { + Premium:false, + Price:80, + Img:'../markup/Img/room.jpg', + ApartsmentType:'Room', + Description:'Wood and stone place', + }]; +export default {mainPageCardInfo} ; root.render( -

Hello, World!

+ ); From 8e0082e6de6ab23f736c4d5585c68251eac68631 Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Sat, 5 Oct 2024 22:00:09 +0300 Subject: [PATCH 2/4] Task2.1 --- src/components/MainPage/MainPage.tsx | 2 +- src/components/MainPageCard/Card.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx index 70e910a..4352d37 100644 --- a/src/components/MainPage/MainPage.tsx +++ b/src/components/MainPage/MainPage.tsx @@ -1,5 +1,5 @@ import Card from '../MainPageCard/Card.tsx'; -import {cardProperties} from '../../src/index.tsx'; +import {cardProperties} from '../src/index.tsx'; function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{ return(
diff --git a/src/components/MainPageCard/Card.tsx b/src/components/MainPageCard/Card.tsx index 9d90e7a..a966ed2 100644 --- a/src/components/MainPageCard/Card.tsx +++ b/src/components/MainPageCard/Card.tsx @@ -1,4 +1,4 @@ - +import {cardProperties} from '../src/index.tsx'; function Card(MainPageCardProps:cardProperties):JSX.Element{ return(
From c609fff70e565eacc79c2f836ab05d52f8c2518b Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Sat, 5 Oct 2024 22:09:13 +0300 Subject: [PATCH 3/4] Task2.2 --- src/components/MainPage/MainPage.tsx | 2 +- src/components/MainPageCard/Card.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx index 4352d37..414789b 100644 --- a/src/components/MainPage/MainPage.tsx +++ b/src/components/MainPage/MainPage.tsx @@ -1,5 +1,5 @@ import Card from '../MainPageCard/Card.tsx'; -import {cardProperties} from '../src/index.tsx'; +import {cardProperties} from '~/src/index.tsx'; function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{ return(
diff --git a/src/components/MainPageCard/Card.tsx b/src/components/MainPageCard/Card.tsx index a966ed2..d86a6f2 100644 --- a/src/components/MainPageCard/Card.tsx +++ b/src/components/MainPageCard/Card.tsx @@ -1,4 +1,4 @@ -import {cardProperties} from '../src/index.tsx'; +import {cardProperties} from '~/src/index.tsx'; function Card(MainPageCardProps:cardProperties):JSX.Element{ return(
From 3119d70710b5d2a5302bf8ef6f176dcb83c35b5b Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Sat, 5 Oct 2024 22:13:24 +0300 Subject: [PATCH 4/4] Task2.3 --- src/components/MainPage/MainPage.tsx | 2 +- src/components/MainPageCard/Card.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx index 414789b..0a4e46e 100644 --- a/src/components/MainPage/MainPage.tsx +++ b/src/components/MainPage/MainPage.tsx @@ -1,5 +1,5 @@ import Card from '../MainPageCard/Card.tsx'; -import {cardProperties} from '~/src/index.tsx'; +import {cardProperties} from '../../index.tsx'; function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{ return(
diff --git a/src/components/MainPageCard/Card.tsx b/src/components/MainPageCard/Card.tsx index d86a6f2..e6c2be1 100644 --- a/src/components/MainPageCard/Card.tsx +++ b/src/components/MainPageCard/Card.tsx @@ -1,4 +1,4 @@ -import {cardProperties} from '~/src/index.tsx'; +import {cardProperties} from '../../index.tsx'; function Card(MainPageCardProps:cardProperties):JSX.Element{ return(