From 11c2e770456d92a04c8dd4f7566859d2d3468707 Mon Sep 17 00:00:00 2001 From: Egor Podolskiy Date: Fri, 27 Sep 2024 01:00:53 +0300 Subject: [PATCH] SC-2 add react pages --- .editorconfig | 4 +- .eslintrc.cjs | 46 ++-- src/app/index.tsx | 7 + src/components/index.ts | 1 + src/components/offer-card/index.tsx | 36 +++ src/components/offer-card/styles.css | 0 src/index.tsx | 9 +- src/pages/favorites-page/index.tsx | 176 ++++++++++++++ src/pages/login-page/index.tsx | 41 ++++ src/pages/main-page/index.tsx | 116 +++++++++ src/pages/main-page/styles.css | 0 src/pages/offer-page/index.tsx | 345 +++++++++++++++++++++++++++ 12 files changed, 756 insertions(+), 25 deletions(-) create mode 100644 src/app/index.tsx create mode 100644 src/components/index.ts create mode 100644 src/components/offer-card/index.tsx create mode 100644 src/components/offer-card/styles.css create mode 100644 src/pages/favorites-page/index.tsx create mode 100644 src/pages/login-page/index.tsx create mode 100644 src/pages/main-page/index.tsx create mode 100644 src/pages/main-page/styles.css create mode 100644 src/pages/offer-page/index.tsx diff --git a/.editorconfig b/.editorconfig index 1f8926f..67cddfa 100644 --- a/.editorconfig +++ b/.editorconfig @@ -13,8 +13,8 @@ root = true [*] charset = utf-8 end_of_line = lf -indent_size = 2 -indent_style = space +indent_size = 4 +indent_style = tab insert_final_newline = true trim_trailing_whitespace = true quote_type = single diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 096662d..33eee8d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,24 +1,30 @@ /* eslint-env node */ module.exports = { - env: { browser: true, es2022: true }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', - "htmlacademy/react-typescript", - ], - parser: '@typescript-eslint/parser', - parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: 'tsconfig.json' }, - settings: { react: { version: 'detect' } }, - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': 'warn', - }, - overrides: [ - { - files: [ '*test*' ], - rules: { '@typescript-eslint/unbound-method': 'off' } - }, - ], + env: { browser: true, es2022: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + "htmlacademy/react-typescript", + ], + parser: '@typescript-eslint/parser', + parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: 'tsconfig.json' }, + settings: { react: { version: 'detect' } }, + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': 'warn', + 'indent': ['error', 'tab'], + 'arrow-body-style': 'off', + }, + overrides: [ + { + files: [ '*test*' ], + rules: { '@typescript-eslint/unbound-method': 'off' } + }, + { + files: [ '**.json' ], + rules: { 'indent': ['error', 'tab'] } + }, + ], } diff --git a/src/app/index.tsx b/src/app/index.tsx new file mode 100644 index 0000000..605cdf0 --- /dev/null +++ b/src/app/index.tsx @@ -0,0 +1,7 @@ +import { MainPage } from '../pages/main-page'; + +const OFFERS_AMOUNT = 555; + +export const App = () => ( + +); diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..161e303 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1 @@ +export { OfferCard } from './offer-card'; diff --git a/src/components/offer-card/index.tsx b/src/components/offer-card/index.tsx new file mode 100644 index 0000000..cd746bc --- /dev/null +++ b/src/components/offer-card/index.tsx @@ -0,0 +1,36 @@ +export const OfferCard = () => ( + +); diff --git a/src/components/offer-card/styles.css b/src/components/offer-card/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/src/index.tsx b/src/index.tsx index be81a6e..21d3b0b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,15 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import { App } from './app'; + const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - -

Hello, World!

- + + + ); + diff --git a/src/pages/favorites-page/index.tsx b/src/pages/favorites-page/index.tsx new file mode 100644 index 0000000..a0950f5 --- /dev/null +++ b/src/pages/favorites-page/index.tsx @@ -0,0 +1,176 @@ +export const FavoritesPage = () => ( +
+
+
+ +
+
+ +
+
+
+

Saved listing

+ +
+
+
+ +
+); diff --git a/src/pages/login-page/index.tsx b/src/pages/login-page/index.tsx new file mode 100644 index 0000000..ec272a2 --- /dev/null +++ b/src/pages/login-page/index.tsx @@ -0,0 +1,41 @@ +export const LoginPage = () => ( +
+
+
+
+
+ + 6 cities logo + +
+
+
+
+ +
+
+
+

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+
+); diff --git a/src/pages/main-page/index.tsx b/src/pages/main-page/index.tsx new file mode 100644 index 0000000..7c75402 --- /dev/null +++ b/src/pages/main-page/index.tsx @@ -0,0 +1,116 @@ +import { OfferCard } from '../../components'; + +type Props = { + offersAmount: number; +}; + +export const MainPage = (props: Props) => { + const { offersAmount } = props; + + return ( +
+
+
+ +
+
+ +
+

Cities

+
+
+ +
+
+
+
+
+

Places

+ {offersAmount} 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/main-page/styles.css b/src/pages/main-page/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/offer-page/index.tsx b/src/pages/offer-page/index.tsx new file mode 100644 index 0000000..917d7c5 --- /dev/null +++ b/src/pages/offer-page/index.tsx @@ -0,0 +1,345 @@ +export const OfferPage = () => ( +
+
+
+ +
+
+ +
+
+
+
+
+ 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

+
+ + + + + +
+
+
+
+
+);