From c61de5b3ed3ff6cc7381d4a2955b6fd75d2348f4 Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Wed, 25 Sep 2024 12:45:58 +0300 Subject: [PATCH 01/18] First task --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 1c15ed3..294460d 100644 --- a/Readme.md +++ b/Readme.md @@ -1,7 +1,7 @@ # Личный проект «Шесть городов» * Студент: [Навар Худер](https://up.htmlacademy.ru/univer-js3/5/user/2571633). -* Наставник: `Неизвестно`. +* Наставник: `Александр Сударев`. --- From 2ee2b605b5b650664f146fadc8f46de1a9b129ce Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Sat, 5 Oct 2024 21:54:28 +0300 Subject: [PATCH 02/18] 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( +
+
+
+ +
+
+ +
+

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 03/18] 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 04/18] 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 05/18] 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(
From d58310102ea1202239d706d6dec41fc73e39dd20 Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Sat, 5 Oct 2024 22:23:12 +0300 Subject: [PATCH 06/18] Start --- 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..0a4e46e --- /dev/null +++ b/src/components/MainPage/MainPage.tsx @@ -0,0 +1,109 @@ +import Card from '../MainPageCard/Card.tsx'; +import {cardProperties} from '../../index.tsx'; +function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{ + return( +
+
+ +
+ +
+

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..e6c2be1 --- /dev/null +++ b/src/components/MainPageCard/Card.tsx @@ -0,0 +1,40 @@ +import {cardProperties} from '../../index.tsx'; +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 ee00078c1e3cfb5074c8cea15668219ae46fae4e Mon Sep 17 00:00:00 2001 From: Nawwar14 <147875072+Nawwar14@users.noreply.github.com> Date: Sun, 6 Oct 2024 10:34:52 +0300 Subject: [PATCH 07/18] Task3 --- src/components/Error/Error404.tsx | 14 + src/components/Favorites/Favorite.tsx | 228 +++++++++++ src/components/LoggedRoute/index.tsx | 9 + src/components/Login/LoginPage.tsx | 61 +++ src/components/Main/main.tsx | 29 ++ src/components/MainPage/MainPage.tsx | 11 +- src/components/MainPageCard/Card.tsx | 2 +- src/components/Offer/Offer.tsx | 478 +++++++++++++++++++++++ src/components/User/index.ts | 3 + src/components/User/interfaces.ts | 11 + src/components/User/model/index.tsx | 45 +++ src/components/User/model/useContext.tsx | 4 + src/index.tsx | 6 +- src/shared/interfaces.ts | 3 + 14 files changed, 897 insertions(+), 7 deletions(-) create mode 100644 src/components/Error/Error404.tsx create mode 100644 src/components/Favorites/Favorite.tsx create mode 100644 src/components/LoggedRoute/index.tsx create mode 100644 src/components/Login/LoginPage.tsx create mode 100644 src/components/Main/main.tsx create mode 100644 src/components/Offer/Offer.tsx create mode 100644 src/components/User/index.ts create mode 100644 src/components/User/interfaces.ts create mode 100644 src/components/User/model/index.tsx create mode 100644 src/components/User/model/useContext.tsx create mode 100644 src/shared/interfaces.ts diff --git a/src/components/Error/Error404.tsx b/src/components/Error/Error404.tsx new file mode 100644 index 0000000..b60d6c0 --- /dev/null +++ b/src/components/Error/Error404.tsx @@ -0,0 +1,14 @@ + +import { Link } from 'react-router-dom'; + + +export const Error404 = () => ( +
+

+ 404 not found +

+ + ⬅️ Main Page + +
+); \ No newline at end of file diff --git a/src/components/Favorites/Favorite.tsx b/src/components/Favorites/Favorite.tsx new file mode 100644 index 0000000..db71598 --- /dev/null +++ b/src/components/Favorites/Favorite.tsx @@ -0,0 +1,228 @@ +export const Favorite = () => ( +
+
+ +
+ +
+
+
+

Saved listing

+ +
+
+
+ +
+); \ No newline at end of file diff --git a/src/components/LoggedRoute/index.tsx b/src/components/LoggedRoute/index.tsx new file mode 100644 index 0000000..b1331d3 --- /dev/null +++ b/src/components/LoggedRoute/index.tsx @@ -0,0 +1,9 @@ +import { Navigate } from 'react-router-dom'; +import { WithChildren } from '../../shared/interfaces'; +import { useUserContext } from '../User'; + +export const LoggedRoute: React.FC = ({ children }) => { + const { user } = useUserContext(); + + return user.logged ? children : ; +}; diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx new file mode 100644 index 0000000..9408c84 --- /dev/null +++ b/src/components/Login/LoginPage.tsx @@ -0,0 +1,61 @@ +export const LoginPage = () => ( +
+
+
+
+
+ + 6 cities logo + +
+
+
+
+ +
+
+
+

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+
+); \ No newline at end of file diff --git a/src/components/Main/main.tsx b/src/components/Main/main.tsx new file mode 100644 index 0000000..ce4dc85 --- /dev/null +++ b/src/components/Main/main.tsx @@ -0,0 +1,29 @@ +import { BrowserRouter, Route, Routes } from 'react-router-dom'; +import {MainPage} from '../MainPage/MainPage.tsx'; +import { LoginPage } from '../Login/LoginPage'; +import { Offer } from '../Offer/Offer'; +import { Favorite } from '../Favorites/Favorite'; +import { Error404 } from '../Error/Error404'; +import {mainPageCardInfo,cardProperties} from '../../index.tsx'; +import { UserContextProvider } from '../User'; +import { LoggedRoute } from '../LoggedRoute'; + +type Props = { + mainPageCardInfo: cardProperties[]; +}; + +export const Main: React.FC = ({ mainPageCardInfo }) => ( + + + + } /> + } /> + + + } /> + } /> + } /> + + + +); \ No newline at end of file diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx index 0a4e46e..a9cc724 100644 --- a/src/components/MainPage/MainPage.tsx +++ b/src/components/MainPage/MainPage.tsx @@ -1,7 +1,12 @@ import Card from '../MainPageCard/Card.tsx'; import {cardProperties} from '../../index.tsx'; -function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{ - return( + +type Props = { + CardProps: cardProperties[]; +}; + +export const MainPage : React.FC = ({ CardProps }) => ( +
@@ -105,5 +110,3 @@ function MainPage({ CardProps }: { CardProps:cardProperties[] }):JSX.Element{
); -} -export default MainPage; diff --git a/src/components/MainPageCard/Card.tsx b/src/components/MainPageCard/Card.tsx index e6c2be1..b25eca6 100644 --- a/src/components/MainPageCard/Card.tsx +++ b/src/components/MainPageCard/Card.tsx @@ -1,4 +1,4 @@ -import {cardProperties} from '../../index.tsx'; +import {cardProperties} from '../Main/main.tsx'; function Card(MainPageCardProps:cardProperties):JSX.Element{ return(
diff --git a/src/components/Offer/Offer.tsx b/src/components/Offer/Offer.tsx new file mode 100644 index 0000000..f609a02 --- /dev/null +++ b/src/components/Offer/Offer.tsx @@ -0,0 +1,478 @@ +export const Offer = () => ( +
+
+ +
+ +
+
+
+
+
+ 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. +

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