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

src/components/app.tsx

@@ -0,0 +1,11 @@
+import MainPage from '../pages/main-page';
+
+type TAppProps = {
+  count: number;
+}
+
+export default function App({ count }: TAppProps) {
+  return (
+    <MainPage count={count} />
+  );
+}

src/components/card.tsx

@@ -0,0 +1,41 @@
+import Rating from './rating';
+type TCardProps = {
+  cardClass?: string;
+  cardPremium?: boolean;
+}
+
+export default function Card({ cardClass, cardPremium = false }: TCardProps) {
+  return (
+    <article className={`${cardClass} place-card`}>
+      {cardPremium ?
+        <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>
+        <Rating ratingClass="place-card" />
+        <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>
+  );
+}

src/components/container.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import Header from './header';
+
+type TContainerProps = {
+  children: ReactNode;
+  pageClass?: string;
+  mainClass?: string;
+  navigation?: boolean;
+}
+
+export default function Container({ children, pageClass, mainClass, navigation }: TContainerProps) {
+  return (
+    <div className={`page ${pageClass ? pageClass : ''}`}>
+      <Header navigation />
+      <main className={`page__main page__main--${mainClass ? mainClass : ''}`}>
+        {children}
+      </main>
+    </div>
+
+  );
+}

src/components/favorite-items.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+type TFavoriteItemsProps = {
+  children: ReactNode;
+}
+export default function FavoriteItems({ children }: TFavoriteItemsProps) {
+  return (
+    <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">
+        {children}
+      </div>
+    </li>
+  );
+}

src/components/header.tsx

@@ -0,0 +1,41 @@
+type THeaderProps = {
+  navigation: boolean;
+}
+
+export default function Header({ navigation }: THeaderProps) {
+  return (
+    <header className="header">
+      <div className="container">
+        <div className="header__wrapper">
+          <div className="header__left">
+            <a className="header__logo-link header__logo-link--active">
+              <img className="header__logo" src="img/logo.svg" alt="6 cities logo" width="81" height="41" />
+            </a>
+          </div>
+          {navigation ?
+            (
+              <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>
+  );
+}
+
+

src/components/offer-inside.tsx

@@ -0,0 +1,11 @@
+type TOfferInside = {
+  textOffer: string;
+}
+
+export default function OfferInside({ textOffer }: TOfferInside) {
+  return (
+    <li className="offer__inside-item">
+      {textOffer}
+    </li>
+  );
+}

src/components/rating.tsx

@@ -0,0 +1,17 @@
+type TRating = {
+  ratingClass: string;
+  isRatingValue?: boolean;
+}
+
+export default function Rating({ ratingClass, isRatingValue }: TRating) {
+  return (
+    <div className={`${ratingClass}__rating rating`}>
+      <div className={`${ratingClass}__stars rating__stars`}>
+        <span style={{ width: '80%' }}></span>
+        <span className="visually-hidden">Rating</span>
+      </div>
+      {isRatingValue ?
+        <span className="offer__rating-value rating__value">4.8</span> : ''}
+    </div>
+  );
+}

src/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import App from './components/app';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
-    <h1>Hello, World!</h1>
+    <App count={5} />
   </React.StrictMode>
 );

src/pages/favorite-page.tsx

@@ -0,0 +1,30 @@
+import Container from '../components/container';
+import Card from '../components/card';
+import FavoriteItems from '../components/favorite-items';
+
+export default function FavoritePage() {
+  return (
+    <Container mainClass='favorites'>
+      <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">
+              <FavoriteItems>
+                <Card cardClass='favorites__card' />
+              </FavoriteItems>
+              <FavoriteItems>
+                <Card cardClass='favorites__card' />
+              </FavoriteItems>
+            </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>
+    </Container>
+  );
+}

src/pages/login-page.tsx

@@ -0,0 +1,31 @@
+import Container from '../components/container';
+
+export default function LoginPage() {
+  return (
+    <Container mainClass='page__main--login' pageClass='page--gray page--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>
+    </Container>
+  )
+}

src/pages/main-page.tsx

@@ -0,0 +1,83 @@
+import Container from '../components/container';
+import Card from '../components/card';
+
+type TMainPageProps = {
+  count: number;
+}
+
+export default function MainPage({ count }: TMainPageProps) {
+  return (
+    <Container pageClass='page--gray page--main' mainClass='index'>
+      <h1 className="visually-hidden">Cities</h1>
+      <div className="tabs">
+        <section className="locations container">
+          <ul className="locations__list tabs__list">
+            <li className="locations__item">
+              <a className="locations__item-link tabs__item" href="#">
+                <span>Paris</span>
+              </a>
+            </li>
+            <li className="locations__item">
+              <a className="locations__item-link tabs__item" href="#">
+                <span>Cologne</span>
+              </a>
+            </li>
+            <li className="locations__item">
+              <a className="locations__item-link tabs__item" href="#">
+                <span>Brussels</span>
+              </a>
+            </li>
+            <li className="locations__item">
+              <a className="locations__item-link tabs__item tabs__item--active">
+                <span>Amsterdam</span>
+              </a>
+            </li>
+            <li className="locations__item">
+              <a className="locations__item-link tabs__item" href="#">
+                <span>Hamburg</span>
+              </a>
+            </li>
+            <li className="locations__item">
+              <a className="locations__item-link tabs__item" href="#">
+                <span>Dusseldorf</span>
+              </a>
+            </li>
+          </ul>
+        </section>
+      </div>
+      <div className="cities">
+        <div className="cities__places-container container">
+          <section className="cities__places places">
+            <h2 className="visually-hidden">Places</h2>
+            <b className="places__found">{count} places to stay in Amsterdam</b>
+            <form className="places__sorting" action="#" method="get">
+              <span className="places__sorting-caption">Sort by</span>
+              <span className="places__sorting-type" tabIndex={0}>
+                Popular
+                <svg className="places__sorting-arrow" width="7" height="4">
+                  <use xlinkHref="#icon-arrow-select"></use>
+                </svg>
+              </span>
+              <ul className="places__options places__options--custom places__options--opened">
+                <li className="places__option places__option--active" tabIndex={0}>Popular</li>
+                <li className="places__option" tabIndex={0}>Price: low to high</li>
+                <li className="places__option" tabIndex={0}>Price: high to low</li>
+                <li className="places__option" tabIndex={0}>Top rated first</li>
+              </ul>
+            </form>
+            <div className="cities__places-list places__list tabs__content">
+              <Card cardClass='cities__card' />
+              <Card cardClass='cities__card' />
+              <Card cardClass='cities__card' />
+              <Card cardClass='cities__card' />
+              <Card cardClass='cities__card' />
+            </div>
+          </section>
+          <div className="cities__right-section">
+            <section className="cities__map map"></section>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+}