From befb5c940f11840a5ae64862e23bddd7a9fad4b2 Mon Sep 17 00:00:00 2001
From: Gurikov Maxim <maximgurikoff@gmail.com>
Date: Tue, 19 Nov 2024 20:38:10 +0500
Subject: [PATCH 1/2] fix to invalid merge

---
 src/Pages/offer-page.tsx            | 15 ++----------
 src/components/bookmark-button.tsx  | 37 +++++++++++++++++++++++++++++
 src/components/offer/offer-card.tsx | 13 ++--------
 src/mocks/detailed-offer.ts         |  2 +-
 4 files changed, 42 insertions(+), 25 deletions(-)
 create mode 100644 src/components/bookmark-button.tsx

diff --git a/src/Pages/offer-page.tsx b/src/Pages/offer-page.tsx
index 58c649b..dc83cf3 100644
--- a/src/Pages/offer-page.tsx
+++ b/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}
diff --git a/src/components/bookmark-button.tsx b/src/components/bookmark-button.tsx
new file mode 100644
index 0000000..daf2f3b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/offer/offer-card.tsx b/src/components/offer/offer-card.tsx
index 4ae3767..e09c999 100644
--- a/src/components/offer/offer-card.tsx
+++ b/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">
diff --git a/src/mocks/detailed-offer.ts b/src/mocks/detailed-offer.ts
index 7d2407e..262f5b7 100644
--- a/src/mocks/detailed-offer.ts
+++ b/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:

From f162ed7cada22ab314a921378cf2261ee7c52695 Mon Sep 17 00:00:00 2001
From: Gurikov Maxim <maximgurikoff@gmail.com>
Date: Tue, 19 Nov 2024 20:40:03 +0500
Subject: [PATCH 2/2] fix

---
 src/Pages/offer-page.tsx            | 2 +-
 src/components/offer/offer-card.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Pages/offer-page.tsx b/src/Pages/offer-page.tsx
index dc83cf3..8d649f4 100644
--- a/src/Pages/offer-page.tsx
+++ b/src/Pages/offer-page.tsx
@@ -13,7 +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";
+import { BookmarkButton } from '../components/bookmark-button.tsx';
 
 export function OfferPage(): React.JSX.Element {
   const offerId = useParams().id;
diff --git a/src/components/offer/offer-card.tsx b/src/components/offer/offer-card.tsx
index e09c999..af73a91 100644
--- a/src/components/offer/offer-card.tsx
+++ b/src/components/offer/offer-card.tsx
@@ -3,7 +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";
+import { BookmarkButton } from '../bookmark-button.tsx';
 
 interface PlaceCardProps {
   id: string;