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

Jump to bottom

Начинаем программировать #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Начинаем программировать #2

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
13 changes: 13 additions & 0 deletions src/components/app/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import MainPage from '../../pages/main-page/main-page.tsx';

type AppProps = {
placeCardCount: number;
}

function App({ placeCardCount }: AppProps): JSX.Element {
return (
<MainPage placeCardCount={ placeCardCount } />
);
}

export default App;
40 changes: 40 additions & 0 deletions src/components/place-card/place-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
function PlaceCard(): JSX.Element {
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">&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>
);
}

export default PlaceCard;
3 changes: 3 additions & 0 deletions src/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const Setting = {
PlaceCardCount: 5
};
4 changes: 3 additions & 1 deletion src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/app/app.tsx';
import { Setting } from './const.ts';

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);

root.render(
<React.StrictMode>
<h1>Hello, World!</h1>
<App placeCardCount={ Setting.PlaceCardCount } />
</React.StrictMode>
);
171 changes: 171 additions & 0 deletions src/pages/favorites-page/favorites-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
function FavoritesPage() {
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">&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>
);
}

export default FavoritesPage;
45 changes: 45 additions & 0 deletions src/pages/login-page/login-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
function LoginPage() {
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
Loading