From 4cd588515527260e12f4deecbd2d08e5e4371d9e Mon Sep 17 00:00:00 2001
From: Margarita Golubeva <margaret.golubeva@gmail.com>
Date: Fri, 10 May 2024 06:39:42 +0300
Subject: [PATCH] feat: add catalog component

---
 .../CatalogPage/model/CatalogPageModel.ts     |  4 ++
 src/widgets/Catalog/model/CatalogModel.ts     | 11 +++++
 src/widgets/Catalog/view/CatalogView.ts       | 41 +++++++++++++++++++
 .../Catalog/view/catalogView.module.scss      | 12 ++++++
 4 files changed, 68 insertions(+)
 create mode 100644 src/widgets/Catalog/model/CatalogModel.ts
 create mode 100644 src/widgets/Catalog/view/CatalogView.ts
 create mode 100644 src/widgets/Catalog/view/catalogView.module.scss

diff --git a/src/pages/CatalogPage/model/CatalogPageModel.ts b/src/pages/CatalogPage/model/CatalogPageModel.ts
index c6073a1a..6ca615e3 100644
--- a/src/pages/CatalogPage/model/CatalogPageModel.ts
+++ b/src/pages/CatalogPage/model/CatalogPageModel.ts
@@ -3,10 +3,13 @@ import type { Page } from '@/shared/types/common.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { setCurrentPage } from '@/shared/Store/actions.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
+import CatalogModel from '@/widgets/Catalog/model/CatalogModel.ts';
 
 import CatalogPageView from '../view/CatalogPageView.ts';
 
 class CatalogPageModel implements Page {
+  private catalog = new CatalogModel();
+
   private view: CatalogPageView;
 
   constructor(parent: HTMLDivElement) {
@@ -16,6 +19,7 @@ class CatalogPageModel implements Page {
 
   private init(): void {
     getStore().dispatch(setCurrentPage(PAGE_ID.CATALOG_PAGE));
+    this.getHTML().append(this.catalog.getHTML());
   }
 
   public getHTML(): HTMLDivElement {
diff --git a/src/widgets/Catalog/model/CatalogModel.ts b/src/widgets/Catalog/model/CatalogModel.ts
new file mode 100644
index 00000000..67dd9966
--- /dev/null
+++ b/src/widgets/Catalog/model/CatalogModel.ts
@@ -0,0 +1,11 @@
+import CatalogView from '../view/CatalogView.ts';
+
+class CatalogModel {
+  private view = new CatalogView();
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+}
+
+export default CatalogModel;
diff --git a/src/widgets/Catalog/view/CatalogView.ts b/src/widgets/Catalog/view/CatalogView.ts
new file mode 100644
index 00000000..86397c82
--- /dev/null
+++ b/src/widgets/Catalog/view/CatalogView.ts
@@ -0,0 +1,41 @@
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import styles from './catalogView.module.scss';
+
+class CatalogView {
+  private catalog: HTMLDivElement;
+
+  private itemsList: HTMLUListElement;
+
+  constructor() {
+    this.itemsList = this.createItemsList();
+    this.catalog = this.createHTML();
+  }
+
+  private createHTML(): HTMLDivElement {
+    this.catalog = createBaseElement({
+      cssClasses: [styles.catalog],
+      tag: 'div',
+    });
+    this.catalog.append(this.itemsList);
+    return this.catalog;
+  }
+
+  private createItemsList(): HTMLUListElement {
+    this.itemsList = createBaseElement({
+      cssClasses: [styles.itemsList],
+      tag: 'ul',
+    });
+    return this.itemsList;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.catalog;
+  }
+
+  public getItemsList(): HTMLUListElement {
+    return this.itemsList;
+  }
+}
+
+export default CatalogView;
diff --git a/src/widgets/Catalog/view/catalogView.module.scss b/src/widgets/Catalog/view/catalogView.module.scss
new file mode 100644
index 00000000..e7ce5615
--- /dev/null
+++ b/src/widgets/Catalog/view/catalogView.module.scss
@@ -0,0 +1,12 @@
+.catalog {
+  display: flex;
+  width: 500px;
+  height: 500px;
+  background-color: var(--noble-gray-300);
+}
+
+.itemsList {
+  width: 500px;
+  height: 500px;
+  background-color: var(--noble-gray-800);
+}