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

Merged
merged 1 commit into from
Aug 13, 2024
Merged

Начинаем программировать #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
4 changes: 2 additions & 2 deletions markup/main-empty.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,6 @@ <h1 class="visually-hidden">Cities</h1>
</div>
</div>
</main>
</div></body>

</div>
</body>
</html>
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';

type AppProps = {
offersCount: number;
}

export default function App({offersCount}: AppProps): JSX.Element {
return (
<MainPage
offersCount = {offersCount}
/>
);
}
44 changes: 44 additions & 0 deletions src/components/card/card.tsx
View file
Open in desktop
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">&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>
);
}
7 changes: 6 additions & 1 deletion src/index.tsx
View file
Open in desktop
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 = {

Check warning on line 9 in src/index.tsx

View workflow job for this annotation

GitHub Actions / Check 

Fast refresh only works when a file has exports. Move your component(s) to a separate file
OffercCount: 5,
} as const;

root.render(
<React.StrictMode>
<h1>Hello, World!</h1>
<App offersCount={Setting.OffercCount} />
</React.StrictMode>
);
51 changes: 51 additions & 0 deletions src/pages/favorites-empty-page.tsx
View file
Open in desktop
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>
);
}
169 changes: 169 additions & 0 deletions src/pages/favorites-page.tsx
View file
Open in desktop
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">&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>
);
}
43 changes: 43 additions & 0 deletions src/pages/login-page.tsx
View file
Open in desktop
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>
);
}
Loading
Loading