Add favourite page

src/pages/FavouritePage/FavouritePage.hbs

@@ -0,0 +1,27 @@
+<div class="favourite">
+    <h1 class="favourite__title">Избранное</h1>
+    {{#each housing}}
+    <div id="{{id}}" class="favourite-card">
+        <div class="favourite-card__image">
+            <img src="{{images.[0].path}}" alt="{{address}}">
+        </div>
+        <div class="favourite-card__details">
+            <span class="favourite-card__title js-favourite-card-link">
+                {{cityName}}, {{address}}
+            </span>
+            <div class="favourite-card__info">
+                {{description}}
+            </div>
+            <div class="favourite-card__actions">
+                <button class="favourite-card__actions__chat js-favourite-card-chat">Напишите {{adAuthor.name}}</button>
+                <button class="favourite-card__actions__map js-favourite-card-map">
+                    <img src="/earth.svg" height="20" width="20">
+                </button>
+                <button class="favourite-card__actions__remove js-favourite-card-remove">
+                    <img src="/delete-basket.svg" height="20" width="20">
+                </button>
+            </div>
+        </div>
+    </div>
+    {{/each}}
+</div>

src/pages/FavouritePage/FavouritePage.sass

@@ -0,0 +1,88 @@
+@use '../../styles/mixins'
+
+.favourite
+    padding: 20px
+    margin: 0 auto
+    width: 70%
+
+    &__title
+        font-size: 24px
+        margin-bottom: 20px
+        font-weight: bold
+
+    &-card
+        display: flex
+        flex-direction: row
+        background: #fff
+        border: 1px solid #e5e5e5
+        border-radius: 8px
+        padding: 16px
+        margin-bottom: 16px
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
+        transition: transform 0.2s ease-in-out
+
+        &:hover
+            transform: scale(1.02)
+
+        &__image
+            width: 200px
+            height: 120px
+            border-radius: 8px
+            overflow: hidden
+            margin-right: 16px
+
+            img
+                width: 100%
+                height: 100%
+                object-fit: cover
+
+        &__details
+            flex: 1
+            display: flex
+            flex-direction: column
+            justify-content: space-between
+
+        &__title
+            font-size: 18px
+            font-weight: bold
+            margin-bottom: 8px
+            cursor: pointer
+            width: max-content
+
+        &__info
+            font-size: 14px
+            color: #666
+            margin-bottom: 12px
+
+            span
+                display: block
+
+        &__actions
+            display: flex
+            flex-direction: row
+            gap: 8px
+
+            button
+                @include mixins.button
+
+                min-height: 30px !important
+                height: 30px !important
+                display: flex
+                align-items: center
+                justify-content: center
+
+            &__chat
+                width: 180px
+
+            &__map
+                background-color: #E6F0FF !important
+                min-width: 50px !important
+                width: 50px !important     
+
+            &__remove
+                background: #f5c6cb !important
+                min-width: 50px !important
+                width: 50px !important
+
+                &:hover
+                    background: #f1b0b7

src/pages/FavouritePage/FavouritePage.ts

@@ -2,26 +2,42 @@
 
 import { AdvertData } from "../../modules/Types";
 import ApiClient from "../../modules/ApiClient";
-import { getCookie } from "../../modules/Utils";
+
+import router from "../../modules/Router";
 
 class FavouritePage {
     #favourites: AdvertData;
 
     constructor(){}
 
-    async #getFavourites() {
+    async #getFavourites(): Promise<void> {
         const userData = await ApiClient.getSessionData();
         const response = await ApiClient.getFavourites(userData.id as string);
         const data = await response.json();
-        console.log(data);
+        this.#favourites = data;
     }
 
-    render(parent: HTMLElement) {
-        this.#getFavourites();
+    async #addEventListeners(): Promise<void> {
+        const cards = document
+            .querySelectorAll('.favourite-card');
+
+        for (const card of cards) {
+            //Обработчик на клик по названию
+            const link: HTMLSpanElement = card.querySelector('.js-favourite-card-link')!;
+            link.onclick = () => {
+                router.navigateTo(`/ads/?id=${card.id}`);
+            }
+        }
+    }
 
-        const favouritesContainer = document.createElement('div');
+    async render(parent: HTMLElement): Promise<void> {
+        await this.#getFavourites();
+
+        const template = Handlebars.templates['FavouritePage.hbs'];
         parent.replaceChildren();
-        parent.appendChild(favouritesContainer);
+        parent.insertAdjacentHTML('afterbegin', template(this.#favourites));
+
+        await this.#addEventListeners();
     }
 }
 

src/styles/styles.sass

@@ -25,6 +25,7 @@
 @use "../src/pages/MapPage/MapPage"
 @use "../src/pages/CityPage/CityPage"
 @use '../src/pages/AdPage/AdPage'
+@use '../src/pages/FavouritePage/FavouritePage'
 
 
 @font-face