Upd support block

projects/ngx-tippy-demo/src/app/components/header/header.component.html

@@ -24,32 +24,7 @@ <h2 class="header__title">ngx-tippy-wrapper</h2>
     ></tui-badge>
   </div>
 
-
-
   <div class="header__actions">
-    <div class="header__support">
-
-      <a
-        class="header__support-link"
-        href="https://www.buymeacoffee.com/alexanderkislov"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <tui-svg
-          class="icon header__support-icon--coffee"
-          src="assets/icons/coffee.svg"
-          alt="Buy Me A Coffee"
-          ngxTippy="Buy Me A Coffee ☕"
-          [tippyProps]="{
-            arrow: false
-          }"
-        ></tui-svg>
-        <img
-          class="header__support-icon--standard"
-          src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
-          alt="Buy Me A Coffee"
-        ></a>
-    </div>
 
     <div class="header__social">
       <t-demo-social></t-demo-social>

projects/ngx-tippy-demo/src/app/components/header/header.component.scss

@@ -71,25 +71,6 @@ $animation-time: 3s;
   }
 }
 
-.header__support-icon--coffee {
-  background: var(--tui-base-03);
-  padding: 0.75rem;
-  border-radius: 50%;
-  display: none;
-  color: var(--tui-text-02);
-  opacity: 0.8;
-  @include transition-opacity;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  @include max-w($tablet) {
-    display: block;
-  }
-}
-
-
 @keyframes animation-bounce-reversed {
   0% {
     transform: translate3d(0, 10px, 0) rotate(0.01deg);

projects/ngx-tippy-demo/src/app/components/social/social.component.html

@@ -1,6 +1,26 @@
 <div class="social">
+
   <ng-container *ngFor="let social of socials">
     <a
+      *ngIf="social.routerLink"
+      [attr.aria-label]="'navigate to ' + social.key"
+      [routerLink]="social.routerLink"
+      class="social__icon social__icon--{{ social.key }}"
+      tabindex="0"
+      [ngxTippy]="sponsor"
+      tippyClassName="tippy-support"
+      [tippyProps]="{
+        arrow: false,
+        interactive: true
+      }"
+    >
+      <tui-svg
+        class="icon"
+        src="assets/icons/{{ social.key }}.svg"
+      ></tui-svg>
+    </a>
+    <a
+      *ngIf="social.link"
       [attr.aria-label]="'navigate to ' + social.key"
       [href]="social.link"
       class="social__icon social__icon--{{ social.key }}"
@@ -12,4 +32,40 @@
       ></tui-svg>
     </a>
   </ng-container>
+
+  <ng-template #sponsor>
+    <div class="social__support">
+
+      <a
+        class="social__support-link"
+        href="https://www.buymeacoffee.com/alexanderkislov"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+
+        <img
+          class="social__support-img"
+          height="36"
+          class="social__support-icon--standard"
+          src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+          alt="Buy Me A Coffee"
+        >
+      </a>
+
+      <a
+        class="social__support-link social__support-link--kofi"
+        href="https://ko-fi.com/C0C6P4GB6"
+        target="_blank"
+      >
+        <img
+          class="social__support-img"
+          height="36"
+          src="https://storage.ko-fi.com/cdn/kofi4.png?v=3"
+          border="0"
+          alt="Buy Me a Coffee at ko-fi.com"
+        >
+      </a>
+    </div>
+
+  </ng-template>
 </div>

projects/ngx-tippy-demo/src/app/components/social/social.component.scss

@@ -1,5 +1,36 @@
 @import 'mixins';
 
+::ng-deep {
+  .social__support {
+    display: flex !important;
+    flex-direction: column;
+  }
+
+  .social__support-link {
+    img {
+      width: 100%;
+      height: 40px;
+      border: 2px solid #ffdd00;
+      border-radius: 15px;
+    }
+  }
+
+  .social__support-link--kofi {
+    margin-top: 0.5rem;
+  }
+
+  .tippy-support {
+    padding: 0.75rem 1rem;
+    background-color: #40d3a5;
+  }
+
+  .dark-scheme {
+    .tippy-support {
+      background-color: #24b185;
+    }
+  }
+}
+
 .social {
   display: flex;
   align-items: center;
@@ -19,3 +50,7 @@
 .social__icon--github {
   margin-left: 0.5rem;
 }
+
+.social__icon--linkedin {
+  margin-left: 0.5rem;
+}

projects/ngx-tippy-demo/src/app/components/social/social.component.ts

@@ -8,13 +8,20 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 })
 export class SocialComponent implements OnInit {
   protected readonly socials = [
+    {
+      key: 'heart',
+      link: null,
+      routerLink: '/sponsor',
+    },
     {
       key: 'linkedin',
       link: 'https://www.linkedin.com/in/alexander-kislov',
+      routerLink: null,
     },
     {
       key: 'github',
       link: 'https://github.com/farengeyt451',
+      routerLink: null,
     },
   ];