Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Маршрут по тайным тропам #3

Merged
merged 1 commit into from
Oct 15, 2024
Merged

Маршрут по тайным тропам #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Thumbs.db
.DS_Store
.env
*.log*
*.lock*

npm-debug.log*
yarn-debug.log*
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@
"history": "5.3.0",
"http-status-codes": "2.3.0",
"leaflet": "1.7.1",
"prettier": "^3.3.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-helmet-async": "1.3.0",
"react-helmet-async": "^2.0.5",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

нужно зафиксировать версию

"react-redux": "8.1.3",
"react-router-dom": "6.16.0"
},
Expand Down
6 changes: 6 additions & 0 deletions src/DataTypes/AppRoutes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export enum AppRoutes {
MainPage = '/',
Login = '/login',
Offer = '/offer/:id',
Favorites = '/favorites',
}
108 changes: 87 additions & 21 deletions src/Pages/FavoritesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Helmet } from 'react-helmet-async';

export function FavoritesPage(): React.JSX.Element {
return (
<div className="page">
Expand All @@ -6,16 +8,26 @@ export function FavoritesPage(): React.JSX.Element {
<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"/>
<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>
<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>
Expand All @@ -31,6 +43,9 @@ export function FavoritesPage(): React.JSX.Element {
</header>

<main className="page__main page__main--favorites">
<Helmet>
<title>6 cities - favorites</title>
</Helmet>
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
Expand All @@ -50,25 +65,40 @@ export function FavoritesPage(): React.JSX.Element {
</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"/>
<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>
<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">
<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 style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
Expand All @@ -82,25 +112,40 @@ export function FavoritesPage(): React.JSX.Element {
<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"/>
<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>
<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">
<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 style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
Expand All @@ -125,25 +170,40 @@ export function FavoritesPage(): React.JSX.Element {
<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"/>
<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>
<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">
<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 style={{ width: '100%' }}></span>
<span className="visually-hidden">Rating</span>
</div>
</div>
Expand All @@ -161,7 +221,13 @@ export function FavoritesPage(): React.JSX.Element {
</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"/>
<img
className="footer__logo"
src="img/logo.svg"
alt="6 cities logo"
width="64"
height="33"
/>
</a>
</footer>
</div>
Expand Down
36 changes: 32 additions & 4 deletions src/Pages/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Helmet } from 'react-helmet-async';

export function LoginPage(): React.JSX.Element {
return (
<div className="page page--gray page--login">
Expand All @@ -6,27 +8,53 @@ export function LoginPage(): React.JSX.Element {
<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"/>
<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">
<Helmet>
<title>6 cities - login</title>
</Helmet>
<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/>
<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/>
<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>
<button
className="login__submit form__submit button"
type="submit"
>
Sign in
</button>
</form>
</section>
<section className="locations locations--login locations--current">
Expand Down
Loading
Loading