Skip to content

Commit

Permalink
module2-task1: Добавил страницы как компоненты
Browse files Browse the repository at this point in the history
  • Loading branch information
@VartoSss
VartoSss committed Sep 29, 2024
1 parent 64a57ec commit b57659a
Show file tree
Hide file tree
Showing 10 changed files with 1,345 additions and 29 deletions.
4 changes: 2 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';
import MainPage from './pages/MainPage/MainPage';

type AppScreenProps = {
rentalOffersCount: number
}
rentalOffersCount: number;
};

function App(props: AppScreenProps): JSX.Element {
return (
Expand Down
4 changes: 2 additions & 2 deletions src/consts.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export const Settings = {
rentalOffersCount: 312
}
rentalOffersCount: 312,
};
70 changes: 70 additions & 0 deletions src/pages/FavoritesPage/FavoritesEmptyPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
function FavoritesEmptyPage(): JSX.Element {
return (
<div className="page page--favorites-empty">
<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">0</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 page__main--favorites-empty">
<div className="page__favorites-container container">
<section className="favorites favorites--empty">
<h1 className="visually-hidden">Favorites (empty)</h1>
<div className="favorites__status-wrapper">
<b className="favorites__status">Nothing yet saved.</b>
<p className="favorites__status-description">
Save properties to narrow down search or plan your future trips.
</p>
</div>
</section>
</div>
</main>
<footer className="footer">
<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>
);
}

export default FavoritesEmptyPage;
229 changes: 229 additions & 0 deletions src/pages/FavoritesPage/FavoritesPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
function FavoritesPage(): JSX.Element {
return (
<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">€180</b>
<span className="place-card__price-text">
/&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" />
</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 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">€80</b>
<span className="place-card__price-text">
/&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" />
</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 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">€180</b>
<span className="place-card__price-text">
/&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" />
</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 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>
);
}

export default FavoritesPage;
67 changes: 67 additions & 0 deletions src/pages/Login/LoginPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
function LoginPage(): JSX.Element {
return (
<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
/>
</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
/>
</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>
);
}

export default LoginPage;
Loading

0 comments on commit b57659a

Please sign in to comment.