Component for user avatar

2 files changed, 26 insertions, 4 deletions

diff --git a/components/UserAvatar.vue b/components/UserAvatar.vue
new file mode 100644
index 0000000..4d45ee0
--- /dev/null
+++ b/components/UserAvatar.vue
@@ -0,0 +1,20 @@
+<template lang="pug">
+  div(v-if="data")
+    img.h-8.w-8.rounded-full(v-if="data.avatar" :src="baseAPI+''+data.avatar" alt="Avatar")
+    span.h-8.w-8.rounded-full.bg-white.pt-1(v-else) {{ data.username[0] }}
+</template>
+
+<script>
+export default {
+  name: "UserAvatar",
+  props: ["data"],
+  data() {
+    return {
+      baseAPI: "",
+    };
+  },
+  created() {
+    this.baseAPI = this.$config.api;
+  },
+};
+</script>
diff --git a/components/VHeader.vue b/components/VHeader.vue
index cf06af2..85d4f56 100644
--- a/components/VHeader.vue
+++ b/components/VHeader.vue
@@ -28,8 +28,7 @@
                   @click="boxUserInfo = !boxUserInfo"
                 )
                   span.sr-only Open user menu
-                  img.h-8.w-8.rounded-full(v-if="me && me.avatar" :src="baseAPI+''+me.avatar" alt="Avatar")
-                  span.h-8.w-8.rounded-full.bg-white.pt-1(v-else-if="me") {{ me.username[0] }}
+                  user-avatar(:data="me")
               .absolute.right-0.z-10.mt-2.w-48.origin-top-right.rounded-md.bg-white.py-1.shadow-lg.ring-1.ring-black.ring-opacity-5(class="focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" v-if="boxUserInfo && me")
                 a#user-menu-item-0.block.px-4.py-2.text-sm.text-gray-700(:href="'/user/'+me.id" role="menuitem" tabindex="-1") Your Profile
                 a#user-menu-item-1.block.px-4.py-2.text-sm.text-gray-700(href="#" role="menuitem" tabindex="-1") Settings
@@ -48,17 +47,21 @@
 </template>
 
 <script>
+import UserAvatar from "@/components/UserAvatar.vue";
+
 import { mapGetters, mapActions } from "vuex";
 
 export default {
   name: "VHeader",
   props: ["pageName"],
+  components: {
+    "user-avatar": UserAvatar,
+  },
   data() {
     return {
       boxInfo: false,
       boxUserInfo: false,
       routeName: "",
-      baseAPI: "",
     };
   },
   computed: {
@@ -66,7 +69,6 @@ export default {
   },
   created() {
     this.routeName = this.$route.name;
-    this.baseAPI = this.$config.api;
     if (this.isLogged) {
       this.$store.dispatch("auth/findMe");
     }