feat: rss logo

src/pages/AboutUsPage/view/AboutUsPageView.ts

@@ -1,7 +1,11 @@
+import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
+import { LINK_DETAILS } from '@/shared/constants/links.ts';
 import { PAGE_DESCRIPTION } from '@/shared/constants/pages.ts';
+import SVG_DETAILS from '@/shared/constants/svg.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
+import createSVGUse from '@/shared/utils/createSVGUse.ts';
 
 import styles from './aboutUsPageView.module.scss';
 
@@ -34,12 +38,27 @@ class AboutUsPageView {
       tag: 'div',
     });
 
-    this.page.append(this.createTitle(), this.cardsList);
+    this.page.append(this.createTitle(), this.cardsList, this.createRSSLogo().getHTML());
     this.parent.append(this.page);
 
     return this.page;
   }
 
+  private createRSSLogo(): LinkModel {
+    const logo = new LinkModel({
+      attrs: {
+        href: 'https://rs.school',
+        target: LINK_DETAILS.BLANK,
+      },
+      classes: [styles.logo],
+    });
+
+    const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
+    svg.append(createSVGUse(SVG_DETAILS.RSS_LOGO));
+    logo.getHTML().append(svg);
+    return logo;
+  }
+
   private createTitle(): HTMLHeadingElement {
     const title = createBaseElement({
       cssClasses: [styles.title],

src/pages/AboutUsPage/view/aboutUsPageView.module.scss

@@ -33,3 +33,28 @@
     justify-content: center;
   }
 }
+
+.logo {
+  display: flex;
+  margin: 0 auto;
+  margin-top: var(--small-offset);
+  width: max-content;
+
+  svg {
+    width: 11rem;
+    height: 4rem;
+    transition: fill 0.1s;
+
+    use {
+      transition: fill 0.1s;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      svg {
+        fill: var(--steam-green-1200);
+      }
+    }
+  }
+}

src/shared/constants/svg.ts

@@ -19,6 +19,7 @@ const SVG_DETAILS = {
   NOT_FOUND: 'notFound',
   OPEN_EYE: 'openEye',
   PROFILE: 'userCircle',
+  RSS_LOGO: 'rssLogo',
   STAR: 'star',
   SVG_URL: 'http://www.w3.org/2000/svg',