Добавит компоненты элементов страниц.

htmlacademy-react · Nov 24, 2024 · 8115554 · 8115554
1 parent 7a0f37d
commit 8115554
Show file tree

Hide file tree

Showing 17 changed files with 658 additions and 820 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -1,12 +1,12 @@
-import MainScreen from '../pages/main-screen';
+import MainScreen from '../pages/main-screen/main-screen';
 
 type AppProps = {
-  offersCount: number;
+  citiesCount: number;
 }
 
-function App({offersCount}: AppProps): JSX.Element {
+function App({citiesCount}: AppProps): JSX.Element {
 
-  return (<MainScreen offersCount={offersCount}/>);
+  return (<MainScreen citiesCount={citiesCount}/>);
 }
 
 export default App;

diff --git a/src/components/place-card.tsx → src/components/cities-card.tsx b/src/components/place-card.tsx → src/components/cities-card.tsx
@@ -1,4 +1,4 @@
-function PlaceCard(): JSX.Element {
+function CitiesCard(): JSX.Element {
   return(
     <article className="cities__card place-card">
       <div className="place-card__mark">
@@ -52,4 +52,4 @@ function PlaceCard(): JSX.Element {
   );
 }
 
-export default PlaceCard;
+export default CitiesCard;
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -0,0 +1,17 @@
+function Footer(): JSX.Element {
+  return(
+    <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>
+  );
+}
+
+export default Footer;
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -0,0 +1,45 @@
+function Header() {
+  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>
+          <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>
+  );
+}
+
+
+export default Header;
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
@@ -0,0 +1,34 @@
+function LoginForm(): JSX.Element {
+  return(
+    <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>
+  );
+}
+
+export default LoginForm;
diff --git a/src/components/map.tsx b/src/components/map.tsx
@@ -0,0 +1,7 @@
+function MapComponent(): JSX.Element {
+  return(
+    <section className="cities__map map" />
+  );
+}
+
+export default MapComponent;
diff --git a/src/components/offer-details.tsx b/src/components/offer-details.tsx
@@ -0,0 +1,233 @@
+function OfferDetails(): JSX.Element {
+  return(
+    <div className="offer__container container">
+      <div className="offer__wrapper">
+        <div className="offer__mark">
+          <span>Premium</span>
+        </div>
+        <div className="offer__name-wrapper">
+          <h1 className="offer__name">
+            Beautiful &amp; luxurious studio at great location
+          </h1>
+          <button className="offer__bookmark-button button" type="button">
+            <svg className="offer__bookmark-icon" width={31} height={33}>
+              <use xlinkHref="#icon-bookmark" />
+            </svg>
+            <span className="visually-hidden">To bookmarks</span>
+          </button>
+        </div>
+        <div className="offer__rating rating">
+          <div className="offer__stars rating__stars">
+            <span style={{ width: '80%' }} />
+            <span className="visually-hidden">Rating</span>
+          </div>
+          <span className="offer__rating-value rating__value">4.8</span>
+        </div>
+        <ul className="offer__features">
+          <li className="offer__feature offer__feature--entire">Apartment</li>
+          <li className="offer__feature offer__feature--bedrooms">
+            3 Bedrooms
+          </li>
+          <li className="offer__feature offer__feature--adults">
+            Max 4 adults
+          </li>
+        </ul>
+        <div className="offer__price">
+          <b className="offer__price-value">€120</b>
+          <span className="offer__price-text">&nbsp;night</span>
+        </div>
+        <div className="offer__inside">
+          <h2 className="offer__inside-title">What&apos;s inside</h2>
+          <ul className="offer__inside-list">
+            <li className="offer__inside-item">Wi-Fi</li>
+            <li className="offer__inside-item">Washing machine</li>
+            <li className="offer__inside-item">Towels</li>
+            <li className="offer__inside-item">Heating</li>
+            <li className="offer__inside-item">Coffee machine</li>
+            <li className="offer__inside-item">Baby seat</li>
+            <li className="offer__inside-item">Kitchen</li>
+            <li className="offer__inside-item">Dishwasher</li>
+            <li className="offer__inside-item">Cabel TV</li>
+            <li className="offer__inside-item">Fridge</li>
+          </ul>
+        </div>
+        <div className="offer__host">
+          <h2 className="offer__host-title">Meet the host</h2>
+          <div className="offer__host-user user">
+            <div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
+              <img
+                className="offer__avatar user__avatar"
+                src="img/avatar-angelina.jpg"
+                width={74}
+                height={74}
+                alt="Host avatar"
+              />
+            </div>
+            <span className="offer__user-name">Angelina</span>
+            <span className="offer__user-status">Pro</span>
+          </div>
+          <div className="offer__description">
+            <p className="offer__text">
+              A quiet cozy and picturesque that hides behind a a river by the
+              unique lightness of Amsterdam. The building is green and from
+              18th century.
+            </p>
+            <p className="offer__text">
+              An independent House, strategically located between Rembrand
+              Square and National Opera, but where the bustle of the city
+              comes to rest in this alley flowery and colorful.
+            </p>
+          </div>
+        </div>
+        <section className="offer__reviews reviews">
+          <h2 className="reviews__title">
+            Reviews · <span className="reviews__amount">1</span>
+          </h2>
+          <ul className="reviews__list">
+            <li className="reviews__item">
+              <div className="reviews__user user">
+                <div className="reviews__avatar-wrapper user__avatar-wrapper">
+                  <img
+                    className="reviews__avatar user__avatar"
+                    src="img/avatar-max.jpg"
+                    width={54}
+                    height={54}
+                    alt="Reviews avatar"
+                  />
+                </div>
+                <span className="reviews__user-name">Max</span>
+              </div>
+              <div className="reviews__info">
+                <div className="reviews__rating rating">
+                  <div className="reviews__stars rating__stars">
+                    <span style={{ width: '80%' }} />
+                    <span className="visually-hidden">Rating</span>
+                  </div>
+                </div>
+                <p className="reviews__text">
+                  A quiet cozy and picturesque that hides behind a a river by
+                  the unique lightness of Amsterdam. The building is green and
+                  from 18th century.
+                </p>
+                <time className="reviews__time" dateTime="2019-04-24">
+                  April 2019
+                </time>
+              </div>
+            </li>
+          </ul>
+          <form className="reviews__form form" action="#" method="post">
+            <label className="reviews__label form__label" htmlFor="review">
+              Your review
+            </label>
+            <div className="reviews__rating-form form__rating">
+              <input
+                className="form__rating-input visually-hidden"
+                name="rating"
+                defaultValue={5}
+                id="5-stars"
+                type="radio"
+              />
+              <label
+                htmlFor="5-stars"
+                className="reviews__rating-label form__rating-label"
+                title="perfect"
+              >
+                <svg className="form__star-image" width={37} height={33}>
+                  <use xlinkHref="#icon-star" />
+                </svg>
+              </label>
+              <input
+                className="form__rating-input visually-hidden"
+                name="rating"
+                defaultValue={4}
+                id="4-stars"
+                type="radio"
+              />
+              <label
+                htmlFor="4-stars"
+                className="reviews__rating-label form__rating-label"
+                title="good"
+              >
+                <svg className="form__star-image" width={37} height={33}>
+                  <use xlinkHref="#icon-star" />
+                </svg>
+              </label>
+              <input
+                className="form__rating-input visually-hidden"
+                name="rating"
+                defaultValue={3}
+                id="3-stars"
+                type="radio"
+              />
+              <label
+                htmlFor="3-stars"
+                className="reviews__rating-label form__rating-label"
+                title="not bad"
+              >
+                <svg className="form__star-image" width={37} height={33}>
+                  <use xlinkHref="#icon-star" />
+                </svg>
+              </label>
+              <input
+                className="form__rating-input visually-hidden"
+                name="rating"
+                defaultValue={2}
+                id="2-stars"
+                type="radio"
+              />
+              <label
+                htmlFor="2-stars"
+                className="reviews__rating-label form__rating-label"
+                title="badly"
+              >
+                <svg className="form__star-image" width={37} height={33}>
+                  <use xlinkHref="#icon-star" />
+                </svg>
+              </label>
+              <input
+                className="form__rating-input visually-hidden"
+                name="rating"
+                defaultValue={1}
+                id="1-star"
+                type="radio"
+              />
+              <label
+                htmlFor="1-star"
+                className="reviews__rating-label form__rating-label"
+                title="terribly"
+              >
+                <svg className="form__star-image" width={37} height={33}>
+                  <use xlinkHref="#icon-star" />
+                </svg>
+              </label>
+            </div>
+            <textarea
+              className="reviews__textarea form__textarea"
+              id="review"
+              name="review"
+              placeholder="Tell how was your stay, what you like and what can be improved"
+              defaultValue={''}
+            />
+            <div className="reviews__button-wrapper">
+              <p className="reviews__help">
+                To submit review please make sure to set{' '}
+                <span className="reviews__star">rating</span> and describe
+                your stay with at least{' '}
+                <b className="reviews__text-amount">50 characters</b>.
+              </p>
+              <button
+                className="reviews__submit form__submit button"
+                type="submit"
+                disabled
+              >
+                Submit
+              </button>
+            </div>
+          </form>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default OfferDetails;