fix: Add solution for customization of the external links

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

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>

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

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'