Skip to content

Commit

Permalink
Merge pull request #2 from egorchh/module2-task1
Browse files Browse the repository at this point in the history
  • Loading branch information
@keksobot
keksobot authored Oct 2, 2024
2 parents f5e7eaf + 11c2e77 commit d9ee4c0
Show file tree
Hide file tree
Showing 12 changed files with 756 additions and 25 deletions.
4 changes: 2 additions & 2 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
46 changes: 26 additions & 20 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
@@ -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'] }
},
],
}
7 changes: 7 additions & 0 deletions src/app/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { MainPage } from '../pages/main-page';

const OFFERS_AMOUNT = 555;

export const App = () => (
<MainPage offersAmount={OFFERS_AMOUNT} />
);
1 change: 1 addition & 0 deletions src/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { OfferCard } from './offer-card';
36 changes: 36 additions & 0 deletions src/components/offer-card/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
export const OfferCard = () => (
<article className="cities__card place-card">
<div className="place-card__mark">
<span>Premium</span>
</div>
<div className="cities__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-01.jpg" width="260" height="200" alt="Place image" />
</a>
</div>
<div className="place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;120</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button className="place-card__bookmark-button button" type="button">
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">To bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{width: '80%'}}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Beautiful &amp; luxurious apartment at great location</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>
);
Empty file added src/components/offer-card/styles.css
View file
Empty file.
9 changes: 6 additions & 3 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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(
<React.StrictMode>
<h1>Hello, World!</h1>
</React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>
);

176 changes: 176 additions & 0 deletions src/pages/favorites-page/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
export const FavoritesPage = () => (
<div className="page">
<header className="header">
<div className="container">
<div className="header__wrapper">
<div className="header__left">
<a className="header__logo-link" href="main.html">
<img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
</a>
</div>
<nav className="header__nav">
<ul className="header__nav-list">
<li className="header__nav-item user">
<a className="header__nav-link header__nav-link--profile" href="#">
<div className="header__avatar-wrapper user__avatar-wrapper">
</div>
<span className="header__user-name user__name">[email protected]</span>
<span className="header__favorite-count">3</span>
</a>
</li>
<li className="header__nav-item">
<a className="header__nav-link" href="#">
<span className="header__signout">Sign out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>

<main className="page__main page__main--favorites">
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
<ul className="favorites__list">
<li className="favorites__locations-items">
<div className="favorites__locations locations locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Amsterdam</span>
</a>
</div>
</div>
<div className="favorites__places">
<article className="favorites__card place-card">
<div className="place-card__mark">
<span>Premium</span>
</div>
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-small-03.jpg" width="150" height="110" alt="Place image"/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;180</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Nice, cozy, warm big bed apartment</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>

<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/room-small.jpg" width="150" height="110" alt="Place image"/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;80</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '80%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Wood and stone place</a>
</h2>
<p className="place-card__type">Room</p>
</div>
</article>
</div>
</li>

<li className="favorites__locations-items">
<div className="favorites__locations locations locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Cologne</span>
</a>
</div>
</div>
<div className="favorites__places">
<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img className="place-card__image" src="img/apartment-small-04.jpg" width="150" height="110" alt="Place image"/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">&euro;180</b>
<span className="place-card__price-text">&#47;&nbsp;night</span>
</div>
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg className="place-card__bookmark-icon" width="18" height="19">
<use xlinkHref="#icon-bookmark"></use>
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">White castle</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>
</div>
</li>
</ul>
</section>
</div>
</main>
<footer className="footer container">
<a className="footer__logo-link" href="main.html">
<img className="footer__logo" src="img/logo.svg" alt="6 cities logo" width="64" height="33"/>
</a>
</footer>
</div>
);
41 changes: 41 additions & 0 deletions src/pages/login-page/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
export const LoginPage = () => (
<div className="page page--gray page--login">
<header className="header">
<div className="container">
<div className="header__wrapper">
<div className="header__left">
<a className="header__logo-link" href="main.html">
<img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41"/>
</a>
</div>
</div>
</div>
</header>

<main className="page__main page__main--login">
<div className="page__login-container container">
<section className="login">
<h1 className="login__title">Sign in</h1>
<form className="login__form form" action="#" method="post">
<div className="login__input-wrapper form__input-wrapper">
<label className="visually-hidden">E-mail</label>
<input className="login__input form__input" type="email" name="email" placeholder="Email" required={false} />
</div>
<div className="login__input-wrapper form__input-wrapper">
<label className="visually-hidden">Password</label>
<input className="login__input form__input" type="password" name="password" placeholder="Password" required={false} />
</div>
<button className="login__submit form__submit button" type="submit">Sign in</button>
</form>
</section>
<section className="locations locations--login locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Amsterdam</span>
</a>
</div>
</section>
</div>
</main>
</div>
);
Loading

0 comments on commit d9ee4c0

Please sign in to comment.