Merge pull request #147 from traPtitech/feat/add_traP_blog_url

traPブログへのリンクを追加
traPtitech · Jun 11, 2024 · c4668fa · c4668fa
2 parents 71db581 + 8d6424f
commit c4668fa
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/src/components/User/AccountList.vue b/src/components/User/AccountList.vue
@@ -2,15 +2,23 @@
 import AccountListItem from './AccountListItem.vue'
 import { Account } from '/@/lib/apis'
 
-interface Props {
+const props = defineProps<{
+  userName: string
   accounts: Account[]
-}
-
-defineProps<Props>()
+}>()
 </script>
 
 <template>
   <ul :class="$style.accounts">
+    <li>
+      <a
+        :href="`https://trap.jp/author/${props.userName}`"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <img src="/@/assets/traP_logo_icon.svg" width="24" height="24" />
+      </a>
+    </li>
     <account-list-item
       v-for="account in accounts"
       :key="account.id"
@@ -23,5 +31,6 @@ defineProps<Props>()
 .accounts {
   display: flex;
   gap: 0.5rem;
+  list-style: none;
 }
 </style>
diff --git a/src/components/User/AccountListItem.vue b/src/components/User/AccountListItem.vue
@@ -11,14 +11,16 @@ defineProps<Props>()
 </script>
 
 <template>
-  <a
-    :class="$style.link"
-    :href="account.url"
-    target="_blank"
-    rel="noreferrer noopener"
-  >
-    <a-icon :name="services.get(account.type)?.icon ?? ''" :size="24" />
-  </a>
+  <li>
+    <a
+      :class="$style.link"
+      :href="account.url"
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      <a-icon :name="services.get(account.type)?.icon ?? ''" :size="24" />
+    </a>
+  </li>
 </template>
 
 <style lang="scss" module>

diff --git a/src/components/User/UserDetailContainer.vue b/src/components/User/UserDetailContainer.vue
@@ -18,7 +18,11 @@ defineProps<{
           {{ userDetail.realName }}
         </div> -->
       </div>
-      <account-list v-if="userDetail" :accounts="userDetail.accounts" />
+      <account-list
+        v-if="userDetail"
+        :accounts="userDetail.accounts"
+        :user-name="userDetail.name"
+      />
     </div>
   </div>
 </template>