From f30c2bc1de856e60fecf1032ae3f462f83636d5c Mon Sep 17 00:00:00 2001
From: xepaerz <xepaerz@mail.ru>
Date: Wed, 3 May 2023 22:47:25 +1000
Subject: [PATCH] add CardApartament and Favorites components react

---
 pairent_frontend_react/src/App.js             |   2 +
 .../CardApartament/CardApartament.jsx         | 115 ++++++++++++
 .../CardApartament/styles/CardApartament.css  | 166 ++++++++++++++++++
 .../src/components/Favorites/Favorites.jsx    |  31 ++++
 .../components/Favorites/styles/Favorites.css |  16 ++
 5 files changed, 330 insertions(+)
 create mode 100644 pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
 create mode 100644 pairent_frontend_react/src/components/CardApartament/styles/CardApartament.css
 create mode 100644 pairent_frontend_react/src/components/Favorites/Favorites.jsx
 create mode 100644 pairent_frontend_react/src/components/Favorites/styles/Favorites.css

diff --git a/pairent_frontend_react/src/App.js b/pairent_frontend_react/src/App.js
index b418edd..de151da 100644
--- a/pairent_frontend_react/src/App.js
+++ b/pairent_frontend_react/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
+import Favorites from './components/Favorites/Favorites';
 import './App.css';
 
 function App() {
@@ -9,6 +10,7 @@ function App() {
       <Header/>
       <main>
         <div className="horizontalLine"></div>
+        <Favorites/>
       </main>
       <Footer/>
     </>
diff --git a/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
new file mode 100644
index 0000000..804d4d6
--- /dev/null
+++ b/pairent_frontend_react/src/components/CardApartament/CardApartament.jsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import './styles/CardApartament.css';
+
+const CardApartament = function (props) {
+    return (
+        <section class="apartmentSection">
+            <div class="apartmentSectionLeft">
+                <img src="./images/apartment.png"></img>
+                <div class="characteristics">
+                    <h3>{props.results.perimetrs} м², {props.results.rooms}-х комнатная</h3>
+                    <p class="address">{props.results.address}, {props.results.floor} этаж из {props.results.floorHouse}</p>
+                    <div class="transport">
+                        <div class="transportBas">
+                            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M19.0625 5.91797H18.75V4.04297C18.75 2.29297 14.875 0.917969 10 0.917969C5.125 0.917969 1.25 2.29297 1.25 4.04297V5.91797H0.9375C0.419922 5.91797 0 6.3375 0 6.85547V9.98047C0 10.498 0.419922 10.918 0.9375 10.918H1.25V17.168C1.25 17.8582 1.80977 18.418 2.5 18.418V19.668C2.5 20.3582 3.05977 20.918 3.75 20.918H5C5.69023 20.918 6.25 20.3582 6.25 19.668V18.418H13.75V19.668C13.75 20.3582 14.3098 20.918 15 20.918H16.25C16.9402 20.918 17.5 20.3582 17.5 19.668V18.418H17.75C18.375 18.418 18.75 17.918 18.75 17.418V10.918H19.0625C19.5801 10.918 20 10.498 20 9.98047V6.85547C20 6.3375 19.5801 5.91797 19.0625 5.91797ZM4.375 16.543C3.68477 16.543 3.125 15.9832 3.125 15.293C3.125 14.6027 3.68477 14.043 4.375 14.043C5.06523 14.043 5.625 14.6027 5.625 15.293C5.625 15.9832 5.06523 16.543 4.375 16.543ZM5 12.168C4.30977 12.168 3.75 11.6082 3.75 10.918V5.91797C3.75 5.22773 4.30977 4.66797 5 4.66797H15C15.6902 4.66797 16.25 5.22773 16.25 5.91797V10.918C16.25 11.6082 15.6902 12.168 15 12.168H5ZM15.625 16.543C14.9348 16.543 14.375 15.9832 14.375 15.293C14.375 14.6027 14.9348 14.043 15.625 14.043C16.3152 14.043 16.875 14.6027 16.875 15.293C16.875 15.9832 16.3152 16.543 15.625 16.543Z" fill="#A9A9A9"/>
+                            </svg>
+                            <p>{props.results.timeToBus} мин</p>                           
+                        </div>
+                        <div class="transportSubway">
+                            <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M18 3.75V13.75C18 15.774 15.524 17.5 12.7759 17.5L15.3063 19.4422C15.5453 19.6257 15.411 20 15.1071 20H2.89286C2.58838 20 2.45523 19.6252 2.69369 19.4422L5.2241 17.5C2.48384 17.5 0 15.7795 0 13.75V3.75C0 1.67895 2.57143 0 5.14286 0H12.8571C15.4687 0 18 1.67895 18 3.75ZM8.03571 9.0625V4.6875C8.03571 4.16973 7.604 3.75 7.07143 3.75H2.89286C2.36029 3.75 1.92857 4.16973 1.92857 4.6875V9.0625C1.92857 9.58027 2.36029 10 2.89286 10H7.07143C7.604 10 8.03571 9.58027 8.03571 9.0625ZM16.0714 9.0625V4.6875C16.0714 4.16973 15.6397 3.75 15.1071 3.75H10.9286C10.396 3.75 9.96429 4.16973 9.96429 4.6875V9.0625C9.96429 9.58027 10.396 10 10.9286 10H15.1071C15.6397 10 16.0714 9.58027 16.0714 9.0625ZM14.1429 11.25C13.0777 11.25 12.2143 12.0895 12.2143 13.125C12.2143 14.1605 13.0777 15 14.1429 15C15.208 15 16.0714 14.1605 16.0714 13.125C16.0714 12.0895 15.208 11.25 14.1429 11.25ZM3.85714 11.25C2.79201 11.25 1.92857 12.0895 1.92857 13.125C1.92857 14.1605 2.79201 15 3.85714 15C4.92228 15 5.78571 14.1605 5.78571 13.125C5.78571 12.0895 4.92228 11.25 3.85714 11.25Z" fill="#A9A9A9"/>
+                            </svg>                   
+                            <p>{props.results.timeToTrain} мин</p>   
+                        </div>
+                    </div>
+                    <div class="amenities">
+                        <div class="amenitiesBlock">
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M5 8.33333V11.6667H15V8.33333C15 6.49479 15.8969 5 17 5H18C18 2.23958 16.6562 0 15 0H5C3.34375 0 2 2.23958 2 5H3C4.10312 5 5 6.49479 5 8.33333ZM18 6.66667H17C16.4469 6.66667 16 7.41146 16 8.33333V13.3333H4V8.33333C4 7.41146 3.55313 6.66667 3 6.66667H2C0.896875 6.66667 0 8.16146 0 10C0 11.2292 0.40625 12.2917 1 12.8698V19.1667C1 19.625 1.225 20 1.5 20H3.5C3.775 20 4 19.625 4 19.1667V18.3333H16V19.1667C16 19.625 16.225 20 16.5 20H18.5C18.775 20 19 19.625 19 19.1667V12.8698C19.5938 12.2917 20 11.2292 20 10C20 8.16146 19.1031 6.66667 18 6.66667Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M10.0002 8.57161C6.89827 8.57161 2.50027 14.0519 2.50027 17.5112C2.50027 19.0692 3.54753 20 5.30259 20C7.21038 20 8.47013 18.8804 10.0002 18.8804C11.5435 18.8804 12.8068 20 14.6978 20C16.4529 20 17.5001 19.0692 17.5001 17.5112C17.5001 14.0519 13.1021 8.57161 10.0002 8.57161ZM4.24713 8.00867C3.84088 6.46182 2.58934 5.46005 1.45185 5.77076C0.314359 6.08147 -0.278213 7.58725 0.128033 9.1341C0.534278 10.681 1.78583 11.6827 2.92332 11.372C4.0608 11.0613 4.65338 9.55552 4.24713 8.00867ZM7.55647 7.08101C8.76505 6.71762 9.36973 4.85158 8.90724 2.91322C8.44474 0.974853 7.09007 -0.301466 5.88149 0.0619209C4.67291 0.425308 4.06823 2.29135 4.53072 4.22971C4.99322 6.16807 6.34828 7.44484 7.55647 7.08101ZM18.5482 5.77121C17.4107 5.4605 16.1595 6.46227 15.7529 8.00912C15.3466 9.55597 15.9392 11.0617 17.0767 11.3725C18.2142 11.6832 19.4653 10.6814 19.872 9.13455C20.2782 7.5877 19.6856 6.08192 18.5482 5.77121ZM12.4439 7.08101C13.6525 7.44439 15.0072 6.16807 15.4697 4.22971C15.9322 2.29135 15.3275 0.425754 14.1189 0.0619209C12.9103 -0.301913 11.5556 0.974853 11.0932 2.91322C10.6307 4.85158 11.2353 6.71762 12.4439 7.08101Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M23.8091 5.48571C17.1652 -1.82991 6.8321 -1.82723 0.190843 5.48571C-0.0589069 5.76071 -0.063782 6.22634 0.177718 6.51161L1.46172 8.02813C1.69197 8.30045 2.06247 8.30625 2.30172 8.04509C7.77372 2.07723 16.2255 2.07589 21.6986 8.04509C21.9379 8.30625 22.3084 8.3 22.5386 8.02813L23.8226 6.51161C24.0637 6.22634 24.0589 5.76071 23.8091 5.48571ZM12 14.2857C10.6743 14.2857 9.59997 15.5647 9.59997 17.1429C9.59997 18.721 10.6743 20 12 20C13.3256 20 14.4 18.721 14.4 17.1429C14.4 15.5647 13.3256 14.2857 12 14.2857ZM19.6001 10.554C15.2779 6.00357 8.71722 6.00848 4.39985 10.554C4.1411 10.8263 4.13285 11.2991 4.37847 11.5875L5.66997 13.1049C5.89497 13.3692 6.25722 13.3871 6.49685 13.1406C9.64497 9.90089 14.3621 9.90804 17.5027 13.1406C17.7424 13.3871 18.1046 13.3696 18.3296 13.1049L19.6211 11.5875C19.8671 11.2991 19.8585 10.8259 19.6001 10.554Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16.25 5V1.25C16.25 0.559766 15.6902 0 15 0H1.25C0.559766 0 0 0.559766 0 1.25V5C0 5.69023 0.559766 6.25 1.25 6.25H15C15.6902 6.25 16.25 5.69023 16.25 5ZM17.5 2.5V7.5C17.5 8.19023 16.9402 8.75 16.25 8.75H10C8.61914 8.75 7.5 9.86914 7.5 11.25V12.5C6.80977 12.5 6.25 13.0598 6.25 13.75V18.75C6.25 19.4402 6.80977 20 7.5 20H10C10.6902 20 11.25 19.4402 11.25 18.75V13.75C11.25 13.0598 10.6902 12.5 10 12.5V11.25H16.25C18.3211 11.25 20 9.57109 20 7.5V5C20 3.61914 18.8809 2.5 17.5 2.5Z" fill="#A9A9A9"/>
+                            </svg>
+                        </div>
+                        <div class="amenitiesLine"></div>                     
+                        <div class="amenitiesBlock">
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M17.8571 0H2.14286C0.959821 0 0 0.959821 0 2.14286V17.8571C0 19.0402 0.959821 20 2.14286 20H17.8571C19.0402 20 20 19.0402 20 17.8571V2.14286C20 0.959821 19.0402 0 17.8571 0ZM10.7143 12.8571H8.57143V15C8.57143 15.3929 8.25 15.7143 7.85714 15.7143H6.42857C6.03571 15.7143 5.71429 15.3929 5.71429 15V5C5.71429 4.60714 6.03571 4.28571 6.42857 4.28571H10.7143C13.0759 4.28571 15 6.20982 15 8.57143C15 10.933 13.0759 12.8571 10.7143 12.8571ZM10.7143 7.14286H8.57143V10H10.7143C11.5 10 12.1429 9.35714 12.1429 8.57143C12.1429 7.78571 11.5 7.14286 10.7143 7.14286Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M13.5 3.46562V2.5H14.25C14.6644 2.5 15 2.12708 15 1.66667V0.833333C15 0.372917 14.6644 0 14.25 0H9.75C9.33562 0 9 0.372917 9 0.833333V1.66667C9 2.12708 9.33562 2.5 9.75 2.5H10.5V3.46562C5.41359 4.27656 1.5 9.12396 1.5 15H22.5C22.5 9.12396 18.5864 4.27656 13.5 3.46562ZM23.25 16.6667H0.75C0.335625 16.6667 0 17.0396 0 17.5V19.1667C0 19.6271 0.335625 20 0.75 20H23.25C23.6644 20 24 19.6271 24 19.1667V17.5C24 17.0396 23.6644 16.6667 23.25 16.6667Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M7.20939 10.2306C7.33564 10.7773 6.73583 11.1929 6.26923 10.9012L4.67799 9.90688L2.691 13.0866C2.17209 13.9169 2.77186 15 3.75045 15H5.78123C6.04009 15 6.24997 15.2099 6.24997 15.4687V17.0312C6.24997 17.2901 6.04009 17.5 5.78123 17.5H3.75447C0.811743 17.5 -0.983878 14.2559 0.574478 11.7625L2.55971 8.58328L0.968892 7.58922C0.496979 7.29442 0.618658 6.57512 1.15948 6.45024L5.4656 5.4561C5.80197 5.37845 6.13751 5.58817 6.21517 5.92446L7.20939 10.2306ZM11.0594 3.08548L12.6723 5.66657L11.0809 6.66098C10.6101 6.95505 10.7293 7.67477 11.2714 7.79997L15.5776 8.7941C15.9163 8.87219 16.25 8.65981 16.3271 8.32575L17.3213 4.01962C17.4462 3.47884 16.8529 3.05404 16.3811 3.349L14.7918 4.34212L13.18 1.7608C11.7143 -0.584237 8.28899 -0.589627 6.81997 1.7608L6.11829 2.88447C5.98119 3.104 6.04798 3.3931 6.26751 3.53029L7.59247 4.35821C7.812 4.4954 8.10122 4.42864 8.23841 4.20911L8.94001 3.08634C9.43657 2.29177 10.5796 2.31775 11.0594 3.08548ZM19.4253 11.7625L18.3505 10.0412C18.2133 9.82156 17.924 9.75473 17.7044 9.89195L16.3817 10.7185C16.1622 10.8557 16.0954 11.1448 16.2326 11.3644L17.3093 13.0875C17.8272 13.9161 17.229 15 16.2493 15H12.5V13.1258C12.5 12.5706 11.8264 12.2905 11.433 12.6839L8.30806 15.8081C8.06395 16.0522 8.06395 16.4479 8.30806 16.692L11.433 19.8165C11.8238 20.2073 12.5 19.9336 12.5 19.3746V17.5H16.2453C19.1856 17.5 20.9849 14.2579 19.4253 11.7625Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M1.21115 10H16.7888C17.8665 10 18.4053 11.0199 17.6425 11.6176L9.85668 17.7225C9.38445 18.0925 8.61555 18.0925 8.14332 17.7225L0.357494 11.6176C-0.405347 11.0199 0.133485 10 1.21115 10Z" fill="#A9A9A9"/>
+                                <path d="M1.21115 8H16.7888C17.8665 8 18.4053 6.98014 17.6425 6.38245L9.85668 0.277498C9.38445 -0.0924988 8.61555 -0.0924988 8.14332 0.277498L0.357494 6.38245C-0.405347 6.98014 0.133485 8 1.21115 8Z" fill="#A9A9A9"/>
+                            </svg>
+                        </div>                     
+                        <div class="amenitiesLine"></div>                      
+                        <div class="amenitiesBlock">
+                            <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M21.75 10H2.25C1.65326 10 1.08097 10.2258 0.65901 10.6276C0.237053 11.0295 0 11.5745 0 12.1429C0 12.7112 0.237053 13.2562 0.65901 13.6581C1.08097 14.0599 1.65326 14.2857 2.25 14.2857H21.75C22.3467 14.2857 22.919 14.0599 23.341 13.6581C23.7629 13.2562 24 12.7112 24 12.1429C24 11.5745 23.7629 11.0295 23.341 10.6276C22.919 10.2258 22.3467 10 21.75 10ZM22.5 15.7143H1.5C1.30109 15.7143 1.11032 15.7895 0.96967 15.9235C0.829018 16.0574 0.75 16.2391 0.75 16.4286V17.1429C0.75 17.9006 1.06607 18.6273 1.62868 19.1632C2.19129 19.699 2.95435 20 3.75 20H20.25C21.0456 20 21.8087 19.699 22.3713 19.1632C22.9339 18.6273 23.25 17.9006 23.25 17.1429V16.4286C23.25 16.2391 23.171 16.0574 23.0303 15.9235C22.8897 15.7895 22.6989 15.7143 22.5 15.7143ZM2.74875 8.57143H21.2512C22.8717 8.57143 23.8116 6.61161 22.8834 5.18393C21 2.28571 16.8539 0.00446429 12 0C7.14656 0.00446429 3 2.28571 1.11656 5.18348C0.1875 6.61116 1.12828 8.57143 2.74875 8.57143ZM18 3.57143C18.1483 3.57143 18.2933 3.61332 18.4167 3.69181C18.54 3.77029 18.6361 3.88185 18.6929 4.01237C18.7497 4.14289 18.7645 4.28651 18.7356 4.42506C18.7066 4.56362 18.6352 4.6909 18.5303 4.79079C18.4254 4.89069 18.2918 4.95871 18.1463 4.98628C18.0008 5.01384 17.85 4.99969 17.713 4.94563C17.5759 4.89157 17.4588 4.80001 17.3764 4.68255C17.294 4.56509 17.25 4.42699 17.25 4.28571C17.25 4.09627 17.329 3.91459 17.4697 3.78064C17.6103 3.64668 17.8011 3.57143 18 3.57143ZM12 2.14286C12.1483 2.14286 12.2933 2.18475 12.4167 2.26324C12.54 2.34172 12.6361 2.45328 12.6929 2.5838C12.7497 2.71432 12.7645 2.85794 12.7356 2.99649C12.7066 3.13505 12.6352 3.26232 12.5303 3.36222C12.4254 3.46211 12.2918 3.53014 12.1463 3.5577C12.0008 3.58526 11.85 3.57112 11.713 3.51706C11.5759 3.46299 11.4588 3.37144 11.3764 3.25398C11.294 3.13652 11.25 2.99842 11.25 2.85714C11.25 2.6677 11.329 2.48602 11.4697 2.35207C11.6103 2.21811 11.8011 2.14286 12 2.14286ZM6 3.57143C6.14834 3.57143 6.29334 3.61332 6.41668 3.69181C6.54001 3.77029 6.63614 3.88185 6.69291 4.01237C6.74968 4.14289 6.76453 4.28651 6.73559 4.42506C6.70665 4.56362 6.63522 4.6909 6.53033 4.79079C6.42544 4.89069 6.2918 4.95871 6.14632 4.98628C6.00083 5.01384 5.85003 4.99969 5.71299 4.94563C5.57594 4.89157 5.45881 4.80001 5.3764 4.68255C5.29399 4.56509 5.25 4.42699 5.25 4.28571C5.25 4.09627 5.32902 3.91459 5.46967 3.78064C5.61032 3.64668 5.80109 3.57143 6 3.57143Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="25" height="12" viewBox="0 0 25 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M18.0035 6.12175e-08H6.00086C5.01158 -0.000141241 4.03761 0.244333 3.16567 0.711658C2.29373 1.17898 1.55087 1.85466 1.00322 2.67853C0.455576 3.5024 0.120142 4.4489 0.0267802 5.43376C-0.0665814 6.41863 0.0850274 7.4113 0.468109 8.32339C0.85119 9.23549 1.45386 10.0387 2.22246 10.6616C2.99105 11.2844 3.90173 11.7075 4.87342 11.8933C5.84511 12.079 6.84764 12.0216 7.79178 11.7262C8.73592 11.4308 9.59236 10.9065 10.2849 10.2H13.7169C14.4093 10.9064 15.2656 11.4307 16.2096 11.7261C17.1536 12.0216 18.1561 12.079 19.1277 11.8934C20.0993 11.7078 21.0099 11.2848 21.7785 10.6622C22.5471 10.0395 23.1499 9.23652 23.5331 8.32461C23.9163 7.41269 24.0682 6.42017 23.9751 5.43539C23.882 4.45061 23.5469 3.50412 22.9996 2.68017C22.4523 1.85621 21.7097 1.18035 20.8381 0.712743C19.9664 0.245137 18.9927 0.000291569 18.0035 6.12175e-08ZM9.30086 6.45C9.30086 6.56935 9.25345 6.68381 9.16906 6.7682C9.08467 6.85259 8.97021 6.9 8.85086 6.9H6.90086V8.85C6.90086 8.96935 6.85345 9.08381 6.76906 9.1682C6.68467 9.25259 6.57021 9.3 6.45086 9.3H5.55086C5.43151 9.3 5.31705 9.25259 5.23266 9.1682C5.14827 9.08381 5.10086 8.96935 5.10086 8.85V6.9H3.15086C3.03151 6.9 2.91705 6.85259 2.83266 6.7682C2.74827 6.68381 2.70086 6.56935 2.70086 6.45V5.55C2.70086 5.43065 2.74827 5.31619 2.83266 5.2318C2.91705 5.14741 3.03151 5.1 3.15086 5.1H5.10086V3.15C5.10086 3.03065 5.14827 2.91619 5.23266 2.8318C5.31705 2.74741 5.43151 2.7 5.55086 2.7H6.45086C6.57021 2.7 6.68467 2.74741 6.76906 2.8318C6.85345 2.91619 6.90086 3.03065 6.90086 3.15V5.1H8.85086C8.97021 5.1 9.08467 5.14741 9.16906 5.2318C9.25345 5.31619 9.30086 5.43065 9.30086 5.55V6.45ZM17.4009 9.3C17.1042 9.3 16.8142 9.21203 16.5675 9.0472C16.3208 8.88238 16.1286 8.64812 16.015 8.37403C15.9015 8.09994 15.8718 7.79834 15.9297 7.50736C15.9876 7.21639 16.1304 6.94912 16.3402 6.73934C16.55 6.52956 16.8173 6.3867 17.1082 6.32882C17.3992 6.27094 17.7008 6.30065 17.9749 6.41418C18.249 6.52771 18.4832 6.71997 18.6481 6.96664C18.8129 7.21332 18.9009 7.50333 18.9009 7.8C18.9009 8.19783 18.7428 8.57936 18.4615 8.86066C18.1802 9.14196 17.7987 9.3 17.4009 9.3ZM19.8009 5.7C19.5042 5.7 19.2142 5.61203 18.9675 5.4472C18.7208 5.28238 18.5286 5.04811 18.415 4.77403C18.3015 4.49994 18.2718 4.19834 18.3297 3.90736C18.3876 3.61639 18.5304 3.34912 18.7402 3.13934C18.95 2.92956 19.2173 2.7867 19.5082 2.72882C19.7992 2.67094 20.1008 2.70065 20.3749 2.81418C20.649 2.92771 20.8832 3.11997 21.0481 3.36664C21.2129 3.61332 21.3009 3.90333 21.3009 4.2C21.3009 4.59783 21.1428 4.97936 20.8615 5.26066C20.5802 5.54197 20.1987 5.7 19.8009 5.7Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M11.9992 15H4.79853V8.75H2.39831V18.75C2.39831 19.4414 2.93461 20 3.59842 20H13.1993C13.8631 20 14.3994 19.4414 14.3994 18.75V8.75H11.9992V15ZM23.7978 5.55469L20.5988 0.554688C20.3738 0.207031 19.9987 0 19.5974 0H4.401C3.99971 0 3.62467 0.207031 3.4034 0.554688L0.20435 5.55469C-0.328201 6.38672 0.241853 7.5 1.20194 7.5H22.8002C23.7566 7.5 24.3266 6.38672 23.7978 5.55469ZM19.1999 19.375C19.1999 19.7188 19.4699 20 19.8 20H21.0001C21.3301 20 21.6001 19.7188 21.6001 19.375V8.75H19.1999V19.375Z" fill="#A9A9A9"/>
+                            </svg>
+                            <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M15 0H1C0.45 0 0 0.421875 0 0.9375V2.8125C0 3.32812 0.45 3.75 1 3.75H15C15.55 3.75 16 3.32812 16 2.8125V0.9375C16 0.421875 15.55 0 15 0ZM1.33333 18.75C1.33333 19.4375 1.93333 20 2.66667 20H13.3333C14.0667 20 14.6667 19.4375 14.6667 18.75V5H1.33333V18.75ZM4 11.5625C4 11.3906 4.15 11.25 4.33333 11.25H6.66667V9.0625C6.66667 8.89062 6.81667 8.75 7 8.75H9C9.18333 8.75 9.33333 8.89062 9.33333 9.0625V11.25H11.6667C11.85 11.25 12 11.3906 12 11.5625V13.4375C12 13.6094 11.85 13.75 11.6667 13.75H9.33333V15.9375C9.33333 16.1094 9.18333 16.25 9 16.25H7C6.81667 16.25 6.66667 16.1094 6.66667 15.9375V13.75H4.33333C4.15 13.75 4 13.6094 4 13.4375V11.5625Z" fill="#A9A9A9"/>
+                            </svg> 
+                        </div>                                  
+                    </div>
+                    <div class="apartmentBtn">
+                        {/* TODO: добавить проверку на авторизацию */}
+                        <button class="contactBtn">
+                            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M15.5437 11.3882L12.0436 9.88817C11.8941 9.82445 11.728 9.81102 11.5701 9.84991C11.4123 9.8888 11.2714 9.9779 11.1686 10.1038L9.61861 11.9976C7.18598 10.8506 5.22828 8.89292 4.08132 6.4603L5.9751 4.91027C6.10126 4.80767 6.19054 4.66676 6.22945 4.50887C6.26836 4.35099 6.25477 4.18472 6.19073 4.03525L4.69071 0.535193C4.62043 0.374068 4.49613 0.242515 4.33925 0.163218C4.18236 0.0839204 4.00273 0.0618495 3.83132 0.100811L0.58126 0.850824C0.415998 0.888986 0.26855 0.982038 0.162983 1.11479C0.0574151 1.24755 -3.80697e-05 1.41216 1.8926e-08 1.58177C1.8926e-08 9.59754 6.49699 16.082 14.5003 16.082C14.6699 16.0821 14.8346 16.0247 14.9674 15.9191C15.1002 15.8136 15.1933 15.6661 15.2315 15.5008L15.9815 12.2507C16.0202 12.0785 15.9977 11.8981 15.9178 11.7407C15.8379 11.5833 15.7056 11.4586 15.5437 11.3882Z" fill="#007EFF"/>
+                            </svg>
+                            Показать телефон                               
+                        </button>
+                        <button class="favoritesBtn">
+                            <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16.2529 1.25809C14.3263 -0.409741 11.4611 -0.109747 9.69282 1.74379L9.00026 2.46878L8.30769 1.74379C6.54288 -0.109747 3.67419 -0.409741 1.74766 1.25809C-0.460107 3.17234 -0.57612 6.60799 1.39962 8.68295L8.20223 15.8185C8.64167 16.2792 9.35533 16.2792 9.79478 15.8185L16.5974 8.68295C18.5766 6.60799 18.4606 3.17234 16.2529 1.25809Z" fill="#F33C52"/>
+                            </svg>                                
+                        </button>
+                        <button class="markBtn">
+                            <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M9.82143 7.16406H1.17857C0.527902 7.16406 0 7.69196 0 8.34263V16.9855C0 17.6362 0.527902 18.1641 1.17857 18.1641H9.82143C10.4721 18.1641 11 17.6362 11 16.9855V8.34263C11 7.69196 10.4721 7.16406 9.82143 7.16406Z" fill="#222222"/>
+                                <path d="M14.8214 1.16406H6.17857C4.97562 1.16406 4 2.13968 4 3.34263V11.9855C4 13.1884 4.97562 14.1641 6.17857 14.1641H14.8214C16.0244 14.1641 17 13.1884 17 11.9855V3.34263C17 2.13968 16.0244 1.16406 14.8214 1.16406Z" fill="#222222" stroke="white" stroke-width="2"/>
+                            </svg>                                
+                        </button>
+                        <button class="noteBtn">
+                            <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M9.08611 3.07763L13.0868 7.07832L4.39948 15.7656L0.832541 16.1594C0.355033 16.2122 -0.0484114 15.8085 0.00471446 15.331L0.401596 11.7615L9.08611 3.07763ZM15.5612 2.48199L13.6828 0.603523C13.0968 0.0175757 12.1465 0.0175757 11.5605 0.603523L9.79331 2.37074L13.794 6.37143L15.5612 4.60421C16.1472 4.01795 16.1472 3.06794 15.5612 2.48199Z" fill="#222222"/>
+                            </svg>                                
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="apartmentSectionRight">
+                <div class="apartmentPrice">
+                    <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M7 12L13.9282 0H0.0717969L7 12Z" fill="#2EC44F"/>
+                    </svg>
+                    <h3>{props.results.price} ₽</h3>
+                </div>
+                <p class="month">в месяц</p>
+                <p class="description">{props.results.description}</p>
+                <p class="date">{props.results.dateCreate}</p>
+            </div>
+        </section>
+    );
+}
+
+export default CardApartament;
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/CardApartament/styles/CardApartament.css b/pairent_frontend_react/src/components/CardApartament/styles/CardApartament.css
new file mode 100644
index 0000000..832ba46
--- /dev/null
+++ b/pairent_frontend_react/src/components/CardApartament/styles/CardApartament.css
@@ -0,0 +1,166 @@
+/*Квартира*/
+.apartmentSection{
+    display: flex;
+    justify-content: space-between;
+    margin-top: 22px;
+}
+
+.apartmentSectionLeft{
+    display: flex;
+}
+
+/*Фото квартиры*/
+.apartmentSectionLeft img{
+    width: 350px;
+    height: 250px;
+}
+
+/*Площадь квартиры*/
+.characteristics h3{
+    margin-left: 34px;
+    font-weight: 600;
+    font-size: 24px;
+    color: #222;
+}
+
+/*Адрес*/
+.address{
+    margin-top: 4px;
+    margin-left: 34px;
+    font-size: 16px;
+    color: #222;
+}
+
+/*Транспорт*/
+.transport{
+    display: flex;
+    margin-top: 10px;
+    margin-left: 34px;
+}
+
+/*Время транспорта*/
+.transport p{
+    font-weight: 500;
+    font-size: 15px;
+    color: #A9A9A9;
+}
+
+.transportBas, .transportSubway{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 96px;
+    height: 32px;
+    border: 2px solid #A9A9A9;
+    border-radius: 20px;
+}
+
+.transportSubway{
+    margin-left: 11px;
+}
+
+/*Удобства*/
+.amenities{
+    margin-top: 23px;
+    margin-left: 18px;
+    display: flex;
+}
+
+.amenitiesBlock{
+    max-width: 95px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+}
+
+.amenitiesBlock svg{
+    margin-left: 16px;
+}
+
+/*Вертикальная линия*/
+.amenitiesLine{
+    width: 2px;
+    height: 55px;
+    background-color: #A9A9A9;
+}
+
+/*Кнопки*/
+.apartmentBtn{
+    display: flex;
+    margin-top: 43px;
+    margin-left: 34px;
+}
+
+/*Кнопка "Показать телефон"*/
+.contactBtn{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 192px;
+    height: 32px;
+    background: #E3F0FF;
+    border-radius: 12px;
+    font-weight: 600;
+    font-size: 16px;
+    color: #007EFF;
+}
+
+/*Кнопка "Избранное", "Закладки" и "Заметки"*/
+.favoritesBtn, .markBtn, .noteBtn{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 12px;
+    width: 32px;
+    height: 32px;
+    background: #fff;
+    border-radius: 20px;
+    border: 1px solid #ccc;
+}
+
+.apartmentSectionRight{
+    text-align: right;
+}
+
+/*Цена квартиры*/
+.apartmentPrice{
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+.apartmentPrice svg{
+    margin-right: 5px;
+}
+
+.apartmentPrice h3{
+    font-weight: 600;
+    font-size: 24px;
+    color: #222;
+}
+
+/*Частота оплаты*/
+.month{
+    margin-right: 25px;
+    font-size: 16px;
+}
+
+/*Описание квартиры*/
+.description{
+    margin-top: 56px;
+    font-size: 15px;
+    line-height: 18px;
+    word-wrap: break-word;
+}
+
+/*Дата публикации*/
+.date{
+    margin-top: 45px;
+    font-size: 15px;
+}
+
+.month, .description, .date{
+    font-weight: 500;
+    color: #A9A9A9;
+}
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/Favorites/Favorites.jsx b/pairent_frontend_react/src/components/Favorites/Favorites.jsx
new file mode 100644
index 0000000..7107488
--- /dev/null
+++ b/pairent_frontend_react/src/components/Favorites/Favorites.jsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import CardApartament from '../../components/CardApartament/CardApartament';
+import axios from 'axios'; /* БЛЯ 10 КБ СУКА */
+import './styles/Favorites.css';
+
+const Favorites = function () {
+    const [apartaments, setApartaments] = useState([])
+
+    async function fetchApartaments() {
+      const response = await axios.get('http://127.0.0.1:8000/api/apartaments/')
+      setApartaments(response.data.results)
+    }
+  
+    useEffect(() => {
+      fetchApartaments()
+    })
+
+    return(
+        <>
+            <h2>Избранное</h2>
+            {apartaments.map((apartament, index) =>
+                <>
+                    <CardApartament results={apartament}/>
+                    <div class="separationLine"></div>
+                </> 
+            )}
+        </>
+    );
+}
+
+export default Favorites;
\ No newline at end of file
diff --git a/pairent_frontend_react/src/components/Favorites/styles/Favorites.css b/pairent_frontend_react/src/components/Favorites/styles/Favorites.css
new file mode 100644
index 0000000..d4ee7be
--- /dev/null
+++ b/pairent_frontend_react/src/components/Favorites/styles/Favorites.css
@@ -0,0 +1,16 @@
+/*Заголовок страницы*/
+h2{
+    margin-top: 14px;
+    margin-bottom: 21px;
+    padding-left: 2%;
+    font-weight: 600;
+    font-size: 24px;
+    color: #222;
+}
+
+/*Разделение секции*/
+.separationLine{
+    margin-top: 22px;
+    margin-left: 34%;
+    border: 1px solid #ccc;
+}