feat(UserCard): make the user avatar clickable to redirect to github profiles

Author: thread-koder

components/UserCard.vue

@@ -2,8 +2,16 @@
   <div class="flex mx-8 h-32 lg:h-40 content-center has-border pb-3">
     <p class="rank hidden md:block">{{ rank }}.</p>
     <div class="image-container">
-      <img class="image" :src="imageUrl" alt="avatar" width="80" height="80" />
-      <span class="image-filter"></span>
+      <a :href="profileUrl" target="_blank">
+        <img
+          class="image"
+          :src="imageUrl"
+          alt="avatar"
+          width="80"
+          height="80"
+        />
+        <span class="image-filter"></span>
+      </a>
     </div>
 
     <div class="block w-full pl-2 lg:px-3 mt-6 lg:mt-8">
@@ -81,9 +89,6 @@ export default {
   @apply text-sm font-semibold lg:text-lg;
 }
 
-.user-name {
-}
-
 .has-border {
   border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
 }