From ef76fd3033631cc4e558de291e716c38a0dedda9 Mon Sep 17 00:00:00 2001
From: Mihail Marcu <marku.michael@gmail.com>
Date: Fri, 18 Mar 2022 11:32:02 +0200
Subject: [PATCH] #223: Add new component for account external link

---
 packages/template/src/App.vue                 | 11 ++---
 .../SpAccDropdownExternalLink.vue             | 48 +++++++++++++++++++
 .../SpAccDropdownExternalLink/index.ts        | 13 +++++
 packages/vue/src/components/index.ts          |  1 +
 4 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 packages/vue/src/components/SpAccDropdownExternalLink/SpAccDropdownExternalLink.vue
 create mode 100644 packages/vue/src/components/SpAccDropdownExternalLink/index.ts

diff --git a/packages/template/src/App.vue b/packages/template/src/App.vue
index 1a8b0499..78e31365 100644
--- a/packages/template/src/App.vue
+++ b/packages/template/src/App.vue
@@ -6,10 +6,9 @@
         :active-route="router.currentRoute.value.path"
       >
         <template #externals>
-          <div class="dropdown-option mb-3">
-            <span> Support </span>
-            <SpExternalArrowIcon />
-          </div>
+          <SpAccDropdownExternalLink title='Support' link=''/>
+          <SpAccDropdownExternalLink title='Twitter' link=''/>
+          <SpAccDropdownExternalLink title='Telegram' link=''/>
         </template>
       </SpNavbar>
       <router-view />
@@ -18,13 +17,13 @@
 </template>
 
 <script lang="ts">
-import { SpExternalArrowIcon, SpNavbar, SpTheme } from '@starport/vue'
+import { SpAccDropdownExternalLink, SpNavbar, SpTheme } from '@starport/vue'
 import { computed, onBeforeMount } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 
 export default {
-  components: { SpTheme, SpNavbar, SpExternalArrowIcon },
+  components: { SpTheme, SpNavbar, SpAccDropdownExternalLink },
 
   setup() {
     // store
diff --git a/packages/vue/src/components/SpAccDropdownExternalLink/SpAccDropdownExternalLink.vue b/packages/vue/src/components/SpAccDropdownExternalLink/SpAccDropdownExternalLink.vue
new file mode 100644
index 00000000..b7609d34
--- /dev/null
+++ b/packages/vue/src/components/SpAccDropdownExternalLink/SpAccDropdownExternalLink.vue
@@ -0,0 +1,48 @@
+<template>
+  <a class="dropdown-option mb-3" :href='link' :target='target'>
+    <span v-text='title'></span>
+    <SpExternalArrowIcon v-if='hasIcon' />
+  </a>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+} from 'vue'
+
+import SpExternalArrowIcon from '../SpExternalArrow'
+
+export default defineComponent({
+  name: 'SpAccDropdownExternalLink',
+
+  components: {
+    SpExternalArrowIcon,
+  },
+
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    link: {
+      type: String,
+      required: true
+    },
+    target: {
+      type: String,
+      default: '_blank'
+    },
+    hasIcon: {
+      type: Boolean,
+      default: true
+    },
+  },
+})
+</script>
+
+<style lang='scss' scoped>
+.dropdown-option {
+  color: #111111;
+  text-decoration: none;
+}
+</style>
diff --git a/packages/vue/src/components/SpAccDropdownExternalLink/index.ts b/packages/vue/src/components/SpAccDropdownExternalLink/index.ts
new file mode 100644
index 00000000..310c303a
--- /dev/null
+++ b/packages/vue/src/components/SpAccDropdownExternalLink/index.ts
@@ -0,0 +1,13 @@
+import { App as Application } from 'vue'
+
+import { registerComponent } from './../../utils/plugins/index'
+// @ts-ignore
+import C from './SpAccDropdownExternalLink.vue'
+
+export const Plugin = {
+  install(vue: Application): void {
+    registerComponent(vue, C)
+  }
+}
+
+export default C
diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts
index 2f3c8f20..966713a2 100644
--- a/packages/vue/src/components/index.ts
+++ b/packages/vue/src/components/index.ts
@@ -1,4 +1,5 @@
 export { default as SpAcc } from './SpAcc'
+export { default as SpAccDropdownExternalLink } from './SpAccDropdownExternalLink'
 export { default as SpAmountSelect } from './SpAmountSelect'
 export { default as SpAssets } from './SpAssets'
 export { default as SpButton } from './SpButton'