From b10d233ffed0ea5b75a91089b621d9ddce9b4030 Mon Sep 17 00:00:00 2001
From: Alexander Kislov <strannik11.92@gmail.com>
Date: Tue, 12 Sep 2023 20:04:12 +0300
Subject: [PATCH] Upd support block

---
 .../components/header/header.component.html   | 25 ---------
 .../components/header/header.component.scss   | 19 -------
 .../components/social/social.component.html   | 56 +++++++++++++++++++
 .../components/social/social.component.scss   | 35 ++++++++++++
 .../app/components/social/social.component.ts |  7 +++
 .../ngx-tippy-demo/src/assets/icons/heart.svg |  1 +
 ...e.Identifier => heart.svg:Zone.Identifier} |  0
 7 files changed, 99 insertions(+), 44 deletions(-)
 create mode 100644 projects/ngx-tippy-demo/src/assets/icons/heart.svg
 rename projects/ngx-tippy-demo/src/assets/icons/{coffee.svg:Zone.Identifier => heart.svg:Zone.Identifier} (100%)

diff --git a/projects/ngx-tippy-demo/src/app/components/header/header.component.html b/projects/ngx-tippy-demo/src/app/components/header/header.component.html
index c9eed5b..87cfd5d 100644
--- a/projects/ngx-tippy-demo/src/app/components/header/header.component.html
+++ b/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>
diff --git a/projects/ngx-tippy-demo/src/app/components/header/header.component.scss b/projects/ngx-tippy-demo/src/app/components/header/header.component.scss
index 642f133..19f3637 100644
--- a/projects/ngx-tippy-demo/src/app/components/header/header.component.scss
+++ b/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);
diff --git a/projects/ngx-tippy-demo/src/app/components/social/social.component.html b/projects/ngx-tippy-demo/src/app/components/social/social.component.html
index a6de371..5e69133 100644
--- a/projects/ngx-tippy-demo/src/app/components/social/social.component.html
+++ b/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>
diff --git a/projects/ngx-tippy-demo/src/app/components/social/social.component.scss b/projects/ngx-tippy-demo/src/app/components/social/social.component.scss
index e76bd1f..ef12dae 100644
--- a/projects/ngx-tippy-demo/src/app/components/social/social.component.scss
+++ b/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;
+}
diff --git a/projects/ngx-tippy-demo/src/app/components/social/social.component.ts b/projects/ngx-tippy-demo/src/app/components/social/social.component.ts
index 8e30233..f8a7e4f 100644
--- a/projects/ngx-tippy-demo/src/app/components/social/social.component.ts
+++ b/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,
     },
   ];
 
diff --git a/projects/ngx-tippy-demo/src/assets/icons/heart.svg b/projects/ngx-tippy-demo/src/assets/icons/heart.svg
new file mode 100644
index 0000000..a083b7e
--- /dev/null
+++ b/projects/ngx-tippy-demo/src/assets/icons/heart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
\ No newline at end of file
diff --git a/projects/ngx-tippy-demo/src/assets/icons/coffee.svg:Zone.Identifier b/projects/ngx-tippy-demo/src/assets/icons/heart.svg:Zone.Identifier
similarity index 100%
rename from projects/ngx-tippy-demo/src/assets/icons/coffee.svg:Zone.Identifier
rename to projects/ngx-tippy-demo/src/assets/icons/heart.svg:Zone.Identifier