-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from Takiera/module2-task1
- Loading branch information
Showing
11 changed files
with
1,152 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -97,6 +97,6 @@ <h1 class="visually-hidden">Cities</h1> | |
</div> | ||
</div> | ||
</main> | ||
</div></body> | ||
|
||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import MainPage from '../../pages/main-page'; | ||
|
||
type AppProps = { | ||
offersCount: number; | ||
} | ||
|
||
export default function App({offersCount}: AppProps): JSX.Element { | ||
return ( | ||
<MainPage | ||
offersCount = {offersCount} | ||
/> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
export default function Card() { | ||
return ( | ||
<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">€120</b> | ||
<span className="place-card__price-text">/ 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 & luxurious apartment at great location</a> | ||
</h2> | ||
<p className="place-card__type">Apartment</p> | ||
</div> | ||
</article> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,17 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom/client'; | ||
import App from './components/app/app'; | ||
|
||
const root = ReactDOM.createRoot( | ||
document.getElementById('root') as HTMLElement | ||
); | ||
|
||
const Setting = { | ||
OffercCount: 5, | ||
} as const; | ||
|
||
root.render( | ||
<React.StrictMode> | ||
<h1>Hello, World!</h1> | ||
<App offersCount={Setting.OffercCount} /> | ||
</React.StrictMode> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
export default 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">Oliver.conner@gmail.com</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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,169 @@ | ||
export default 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">Oliver.conner@gmail.com</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">/ 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">€80</b> | ||
<span className="place-card__price-text">/ 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">€180</b> | ||
<span className="place-card__price-text">/ 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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
export default 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> | ||
); | ||
} |
Oops, something went wrong.