feat: add catalog component

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 {

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;

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;

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);
+}