From 2a495b7fafeb25ca1aa1ff1d6c18232d0add1acb Mon Sep 17 00:00:00 2001 From: Nawwar14 Date: Wed, 25 Sep 2024 12:26:15 +0300 Subject: [PATCH 1/3] 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 4fa34c4cd60598dee547f12e0c479e8e8aef431c Mon Sep 17 00:00:00 2001 From: Nawwar14 <147875072+Nawwar14@users.noreply.github.com> Date: Thu, 24 Oct 2024 00:32:28 +0300 Subject: [PATCH 2/3] xxxxx --- package-lock.json | 2 +- src/App.tsx | 33 + src/components/Favorites/Favorite.tsx | 242 +---- src/components/Login/LoginPage.tsx | 116 +-- src/components/MainPage/MainPage.tsx | 27 +- src/components/Offer/Offer.tsx | 903 +++++++++--------- src/components/Offer/OfferCard.tsx | 51 + src/components/Offer/OfferList.tsx | 38 + .../SendCommentForm/SendCommentForm.tsx | 60 ++ src/index.tsx | 64 +- src/mock/offers.ts | 42 + 11 files changed, 783 insertions(+), 795 deletions(-) create mode 100644 src/App.tsx create mode 100644 src/components/Offer/OfferCard.tsx create mode 100644 src/components/Offer/OfferList.tsx create mode 100644 src/components/SendCommentForm/SendCommentForm.tsx create mode 100644 src/mock/offers.ts diff --git a/package-lock.json b/package-lock.json index 9e0465f..ff09938 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1524,7 +1524,7 @@ "version": "18.2.11", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.11.tgz", "integrity": "sha512-zq6Dy0EiCuF9pWFW6I6k6W2LdpUixLE4P6XjXU1QHLfak3GPACQfLwEuHzY5pOYa4hzj1d0GxX/P141aFjZsyg==", - "devOptional": true, + "dev": true, "dependencies": { "@types/react": "*" } diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..a21e1a8 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,33 @@ +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import MainPage from './components/MainPage/MainPage'; +import Favorite from './components/Favorites/Favorite'; +import LoginPage from './components/Login/LoginPage'; +import Offer from './components/Offer/Offer'; + +type Offer = { + id: number; + title: string; + price: number; + rating: number; + type: string; + isPremium: boolean; + previewImage: string; + NumberOfPlaces: number; +}; + +type AppProps = { + offers: Offer[]; +}; + +export default function App({ offers }: AppProps) { + return ( + + + } /> + } /> + } /> + } /> + + + ); +} diff --git a/src/components/Favorites/Favorite.tsx b/src/components/Favorites/Favorite.tsx index 132d12f..b7525f0 100644 --- a/src/components/Favorites/Favorite.tsx +++ b/src/components/Favorites/Favorite.tsx @@ -1,228 +1,32 @@ -export const Favorite = () => ( +import OfferCard from '../Offer/OfferCard'; +type Offer = { + id: number; + title: string; + price: number; + rating: number; + type: string; + isPremium: boolean; + previewImage: string; + NumberOfPlaces: number; +}; +type FavoriteProps = { + offers: Offer[]; +}; +const Favorite = ({ offers }: FavoriteProps) => (
-
-
-
-
- - 6 cities logo - -
- -
-
-
-
-

Saved listing

- +

Saved listings

+
+ {offers.map((offer) => ( + + ))} +
-
); + +export default Favorite; diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx index f60425b..0e1673d 100644 --- a/src/components/Login/LoginPage.tsx +++ b/src/components/Login/LoginPage.tsx @@ -1,61 +1,63 @@ -export const LoginPage = () => ( -
-
-
-
-
- - 6 cities logo - +export default function LoginPage () { + return ( +
+
+
+
+
+ + 6 cities logo + +
-
-
+ -
-
-
-

Sign in

-
-
- - -
-
- - +
+
+
+

Sign in

+ +
+ + +
+
+ + +
+ + +
+
+ - - -
-
- -
-
-
-
-); +
+
+
+
+ ); +} diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx index 47cca7b..ee9a53a 100644 --- a/src/components/MainPage/MainPage.tsx +++ b/src/components/MainPage/MainPage.tsx @@ -1,9 +1,21 @@ import {FC} from 'react'; -import Card from '../MainPageCard/Card.tsx'; -import {cardProperties}from '../../index.tsx'; +import OfferList from '../Offer/OfferList'; +type Offer = { + id: number; + title: string; + price: number; + rating: number; + type: string; + isPremium: boolean; + previewImage: string; + NumberOfPlaces: number; +}; +type MainPageProps = { + offers: Offer[]; +}; -export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) => +export const MainPage : FC = ({ offers }) => (
@@ -77,7 +89,7 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>

Places

- {CardProps[0].NumberOfPlaces} places to stay in Amsterdam + {offers.length} places to stay in Amsterdam
Sort by @@ -94,10 +106,7 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>
- - - - +
@@ -108,4 +117,4 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>
); - +export default MainPage; diff --git a/src/components/Offer/Offer.tsx b/src/components/Offer/Offer.tsx index f8602a6..6c9511b 100644 --- a/src/components/Offer/Offer.tsx +++ b/src/components/Offer/Offer.tsx @@ -1,478 +1,485 @@ -export const Offer = () => ( -
-
-
-
-
- - 6 cities logo - +import SendCommentForm from '../SendCommentForm/SendCommentForm'; +export default function Offer () { + return ( + -
+
-
-
-
-
-
- Photo studio -
-
- Photo studio -
-
- Photo studio -
-
- Photo studio -
-
- Photo studio -
-
- Photo studio +
+
+
+
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
-
-
-
-
- Premium -
-
-

- Beautiful & luxurious studio at great location -

- -
-
-
- - Rating +
+
+
+ Premium
- 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 +
+

+ Beautiful & luxurious studio at great location +

+ +
+
+
+ + Rating
- Angelina - Pro + 4.8
-
-

- 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. -

+
    +
  • + Apartment +
    • +
  • + 3 Bedrooms +
    • +
  • + Max 4 adults +
    • +
+
+ €120 +  night
-
-
-

- Reviews · 1 -

-
    -
  • -
    -
    - Reviews avatar -
    - Max +
    +

    What's inside

    +
      +
    • Wi-Fi
      • +
    • Washing machine
      • +
    • Towels
      • +
    • Heating
      • +
    • Coffee machine
      • +
    • Baby seat
      • +
    • Kitchen
      • +
    • Dishwasher
      • +
    • Cabel TV
      • +
    • Fridge
      • +
    +
    +
    +

    Meet the host

    +
    +
    + Host avatar
    -
    -
    -
    - - Rating + 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
      -

      - 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. -

      - -
    -
    • -
-
- -
- -