Контроль и ограничения (часть 1)

src/Pages/offer-page.tsx

@@ -13,6 +13,7 @@ import { OfferHost } from '../components/offer/offer-host.tsx';
 import { capitalize, pluralizeAndCombine } from '../utils/string-utils.ts';
 import { Rating } from '../components/rating.tsx';
 import { OfferGallery } from '../components/offer/offer-gallery.tsx';
+import { BookmarkButton } from '../components/bookmark-button.tsx';
 
 export function OfferPage(): React.JSX.Element {
   const offerId = useParams().id;
@@ -36,19 +37,7 @@ export function OfferPage(): React.JSX.Element {
                 )}
                 <div className="offer__name-wrapper">
                   <h1 className="offer__name">{currentOffer.title}</h1>
-                  <button
-                    className="offer__bookmark-button button"
-                    type="button"
-                  >
-                    <svg
-                      className="offer__bookmark-icon"
-                      width="31"
-                      height="33"
-                    >
-                      <use xlinkHref="#icon-bookmark"></use>
-                    </svg>
-                    <span className="visually-hidden">To bookmarks</span>
-                  </button>
+                  <BookmarkButton size='big' isFavorite={currentOffer.isFavorite} usagePlace='offer' />
                 </div>
                 <Rating
                   rating={currentOffer.rating}

src/components/bookmark-button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface BookmarkButtonProps {
+  size: 'big' | 'small';
+  isFavorite?: boolean;
+  usagePlace: 'offer' | 'place-card';
+}
+
+export function BookmarkButton({size, isFavorite, usagePlace}: BookmarkButtonProps): React.JSX.Element {
+  const sizes = {
+    'small': {
+      'width': 18,
+      'height': 19,
+    },
+    'big': {
+      'width': 31,
+      'height': 33,
+    }
+  };
+  return (
+    <button
+      className={`${usagePlace}__bookmark-button ${isFavorite ? `${usagePlace}__bookmark-button--active` : ''} button`}
+      type="button"
+    >
+      <svg
+        className={`${usagePlace}__bookmark-icon`}
+        width={sizes[size].width}
+        height={sizes[size].height}
+      >
+        <use xlinkHref="#icon-bookmark"></use>
+      </svg>
+      <span className="visually-hidden">
+        {isFavorite ? 'In bookmarks' : 'To bookmarks'}
+      </span>
+    </button>
+  );
+}

src/components/offer/offer-card.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
 import cn from 'classnames';
 import { Rating } from '../rating.tsx';
+import { BookmarkButton } from '../bookmark-button.tsx';
 
 interface PlaceCardProps {
   id: string;
@@ -71,17 +72,7 @@ export function OfferCard({
             <b className="place-card__price-value">&euro;{price}</b>
             <span className="place-card__price-text">&#47;&nbsp;night</span>
           </div>
-          <button
-            className={`place-card__bookmark-button ${isFavorite ? '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">
-              {isFavorite ? 'In bookmarks' : 'To bookmarks'}
-            </span>
-          </button>
+          <BookmarkButton size='small' isFavorite={isFavorite} usagePlace='place-card' />
         </div>
         <Rating rating={rating} usePlace="place-card" />
         <h2 className="place-card__name">

src/mocks/detailed-offer.ts

@@ -17,7 +17,7 @@ export const detailedOfferMocks = [
       longitude: 4.673877537499948,
       zoom: 8,
     },
-    isFavorite: false,
+    isFavorite: true,
     isPremium: false,
     rating: 4,
     description: