Rss ecomm 4 16

src/app/components/card-component.ts

@@ -0,0 +1,35 @@
+import { BaseComponent } from "./base-component";
+
+export interface ICardAttributes {
+    imageSrc?: string;
+    title?: string;
+    description?: string;
+    inputValue?: string;
+  }
+
+  export class CardComponent extends BaseComponent {
+    protected card: BaseComponent ;
+
+    constructor(data: Partial<ICardAttributes> = {}) {
+      const { description = '' } = data;
+
+      super({ tag: 'div', classList: ['col', 's12', 'm4', 'center-align'] });
+
+      const card = new BaseComponent({ tag: 'div', classList: ['card'] });
+      this.card = card;
+      this.appendChild(this.card);
+
+      const cardContent = new BaseComponent({
+        tag: 'div',
+        classList: ['card-content'],
+      });
+      card.appendChild(cardContent);
+
+      const contentParagraph = new BaseComponent({
+        tag: 'p',
+        content: description,
+      });
+      cardContent.appendChild(contentParagraph);
+    }
+  }
+

src/app/views/main/discount-card.ts

@@ -0,0 +1,54 @@
+import { BaseComponent } from "@components/base-component";
+import { ButtonComponent, IButtonAttributes } from "@components/button-component";
+import { CardComponent, ICardAttributes } from "@components/card-component";
+import { IInputAttributes, InputComponent } from "@components/input-component";
+import { showErrorMessage, showSucessMessage } from "@utils/toast-messages";
+
+export default class DiscountCardComponent extends CardComponent {
+    constructor(data: Partial<ICardAttributes> = {}) {
+        super(data);
+        const { inputValue = '' } = data;
+        const discountContainer = new BaseComponent({
+            tag: 'div'
+        });
+        this.card.appendChild(discountContainer);
+
+        const inputAttr: IInputAttributes = {
+            disabled: true,
+            value: inputValue,
+            classList: ['col', 's4', 'red-text', 'offset-s2'],
+            id: 'input',
+        };
+
+        const input = new InputComponent(inputAttr);
+        discountContainer.appendChild(input);
+
+        const buttonAttr: IButtonAttributes = {
+            content: 'Copy',
+            onClick: () => {
+                const inputElement = document.getElementById('input') as HTMLInputElement;
+                if (inputElement) {
+                    navigator.clipboard
+                        .writeText(inputElement.value)
+                        .then(() => {
+                            showSucessMessage('Text copied to clipboard');
+                        })
+                        .catch(() => {
+                            showErrorMessage('Failed to copy text');
+                        });
+                }
+            },
+            classList: [
+                'edit-profile-button',
+                'profile-button',
+                'waves-effect',
+                'waves-light',
+                'btn',
+                'no-text-transform',
+            ],
+        };
+
+        const button = new ButtonComponent(buttonAttr);
+        discountContainer.appendChild(button);
+    }
+}

src/app/views/main/main-page.ts

@@ -2,6 +2,9 @@ import View from '@views/view';
 import { BaseComponent, IAttributes } from '@components/base-component';
 import { IImageAttributes, ImageComponent } from '@components/image-component';
 import carUrl from '@assets/main-image.webp';
+import { ICardAttributes } from '@components/card-component';
+import DiscountCardComponent  from './discount-card';
+
 
 export default class MainPageView extends View {
   private mainContainer!: BaseComponent; // добавлять разные блоки сюда
@@ -28,5 +31,34 @@ export default class MainPageView extends View {
     this.mainContainer.appendChild(mainImg);
     this.appendChild(this.mainContainer);
     document.body.appendChild(this.htmlElement);
+
+    const promoSectionAttr: IAttributes = {
+      tag: 'section',
+      id: 'promo-section',
+      classList: ['row'],
+    };
+    const promoSection = new BaseComponent(promoSectionAttr);
+    this.mainContainer.appendChild(promoSection);
+
+    const cardAttr1: ICardAttributes = {
+      inputValue: 'DISCOUNT10',
+      description: 'GET 30% OFF YOUR CART WITH ORDERS OVER 1000$',
+    };
+    const card1 = new DiscountCardComponent(cardAttr1);
+    promoSection.appendChild(card1);
+
+    const cardAttr2: ICardAttributes = {
+      inputValue: 'DISCOUNT20',
+      description: 'TAKE EXTRA 20% OFF FOR ORDERS OVER 1000€',
+    };
+    const card2 = new DiscountCardComponent(cardAttr2);
+    promoSection.appendChild(card2);
+
+    const cardAttr3: ICardAttributes = {
+      inputValue: 'DISCOUNT30',
+      description: 'GET 30% OFF YOUR CART WITH ORDERS OVER 1500$',
+    };
+    const card3 = new DiscountCardComponent(cardAttr3);
+    promoSection.appendChild(card3);
   }
 }