From 0f54752111cd2e3c254bdbfb717fcc9dd635b6af Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 4 Oct 2023 22:01:26 +0300
Subject: [PATCH] Show website link on hover in social links block

---
 .../Author/AuthorCard/AuthorCard.module.scss  | 117 +++++++++++++++++-
 .../Author/AuthorCard/AuthorCard.tsx          |   8 +-
 2 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/src/components/Author/AuthorCard/AuthorCard.module.scss b/src/components/Author/AuthorCard/AuthorCard.module.scss
index 9f7124d0..6816bae0 100644
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@@ -144,6 +144,15 @@
       &::before {
         filter: invert(1);
       }
+
+      .authorSubscribeSocialLabel {
+        color: #000;
+        display: block;
+        @include font-size(1.6rem);
+        left: 100%;
+        padding-left: 0.4rem;
+        position: absolute;
+      }
     }
   }
 
@@ -151,18 +160,36 @@
     &::before {
       background-image: url(/icons/user-link-facebook.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='twitter.com/'] {
     &::before {
       background-image: url(/icons/user-link-twitter.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='telegram.com/'] {
     &::before {
       background-image: url(/icons/user-link-telegram.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='vk.cc/'],
@@ -170,77 +197,143 @@
     &::before {
       background-image: url(/icons/user-link-vk.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='tumblr.com/'] {
     &::before {
       background-image: url(/icons/user-link-tumblr.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='instagram.com/'] {
     &::before {
       background-image: url(/icons/user-link-instagram.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='behance.net/'] {
     &::before {
       background-image: url(/icons/user-link-behance.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='dribbble.com/'] {
     &::before {
       background-image: url(/icons/user-link-dribbble.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='github.com/'] {
     &::before {
       background-image: url(/icons/user-link-github.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='linkedin.com/'] {
     &::before {
       background-image: url(/icons/user-link-linkedin.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='medium.com/'] {
     &::before {
       background-image: url(/icons/user-link-medium.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='ok.ru/'] {
     &::before {
       background-image: url(/icons/user-link-ok.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='pinterest.com/'] {
     &::before {
       background-image: url(/icons/user-link-pinterest.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='reddit.com/'] {
     &::before {
       background-image: url(/icons/user-link-reddit.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='tiktok.com/'] {
     &::before {
       background-image: url(/icons/user-link-tiktok.svg);
     }
-  }
 
-  a[href*='vk.com/'] {
-    &::before {
-      background-image: url(/icons/user-link-vk.svg);
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
     }
   }
 
@@ -249,12 +342,24 @@
     &::before {
       background-image: url(/icons/user-link-youtube.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   a[href*='dzen.ru/'] {
     &::before {
       background-image: url(/icons/user-link-dzen.svg);
     }
+
+    &:hover {
+      .authorSubscribeSocialLabel {
+        display: none;
+      }
+    }
   }
 
   .button {
@@ -286,6 +391,10 @@
   }
 }
 
+.authorSubscribeSocialLabel {
+  display: none;
+}
+
 .authorSubscribeSocial {
   align-items: center;
   display: flex;
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index 4f1ef489..20333471 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -276,7 +276,13 @@ export const AuthorCard = (props: Props) => {
                 <div class={styles.authorSubscribe}>
                   <Show when={!props.noSocialButtons && !props.hideWriteButton && props.author.links}>
                     <div class={styles.authorSubscribeSocial}>
-                      <For each={props.author.links}>{(link) => <a href={link} />}</For>
+                      <For each={props.author.links}>
+                        {(link) => (
+                          <a href={link}>
+                            <span class={styles.authorSubscribeSocialLabel}>{link}</span>
+                          </a>
+                        )}
+                      </For>
                     </div>
                   </Show>
                   <Show when={!props.minimizeSubscribeButton}>