Fix/button link

src/components/Contest/ContestTeams.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 
 import FormInput from '/@/components/UI/FormInput.vue'
 import ContestTeamItem from '/@/components/Contest/ContestTeamItem.vue'
-import { RouterLink } from 'vue-router'
 import { ContestTeam } from '/@/lib/apis'
 import { computed, ref } from 'vue'
 import { searchListCaseInsensitive } from '/@/lib/search'
@@ -30,14 +29,12 @@ const filteredContestTeams = computed(() =>
           icon="magnify"
         />
       </div>
-      <div>
-        <router-link
-          :to="{ name: 'ContestTeamNew', params: { contestId: contestId } }"
-          :class="$style.link"
-        >
-          <base-button type="primary" icon="mdi:plus">New</base-button>
-        </router-link>
-      </div>
+      <link-button
+        :to="{ name: 'ContestTeamNew', params: { contestId: contestId } }"
+        type="primary"
+        icon="mdi:plus"
+        >New</link-button
+      >
     </div>
     <ul :class="$style.teamList">
       <li v-for="contestTeam in filteredContestTeams" :key="contestTeam.id">
@@ -60,10 +57,6 @@ const filteredContestTeams = computed(() =>
 .searchForm {
   flex-grow: 1;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .teamList {
   list-style: none;
   padding: 0.5rem 0;

src/components/UI/LinkButton.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+
+import { RouteLocationRaw } from 'vue-router'
+
+type ButtonType = 'primary' | 'secondary' | 'warning'
+
+interface Props {
+  to: RouteLocationRaw
+  type?: ButtonType
+  icon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  icon: undefined
+})
+</script>
+
+<template>
+  <router-link
+    :to="props.to"
+    :class="$style.linkButton"
+    :data-button-type="props.type"
+  >
+    <icon v-if="props.icon" :name="props.icon" />
+    <slot />
+  </router-link>
+</template>
+
+<style lang="scss" module>
+.linkButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 24px;
+  border-radius: 6px;
+  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);
+  transition: 0.2s ease-in-out;
+  text-decoration: none;
+  color: inherit;
+
+  &[data-button-type='primary'] {
+    color: $color-primary-text;
+    background-color: $color-primary;
+  }
+  &[data-button-type='secondary'] {
+    color: $color-primary;
+    background-color: $color-background;
+    border: 1px solid $color-primary;
+  }
+  &[data-button-type='warning'] {
+    color: $color-primary-text;
+    background-color: $color-warning;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>

src/components/User/UserProfileDesktop.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import UserAccounts from '/@/components/User/UserAccounts.vue'
 import type { UserDetail } from '/@/lib/apis'
@@ -22,9 +21,9 @@ defineProps<Props>()
       </div>
       <div :class="$style.accounts">
         <user-accounts :accounts="user.accounts" />
-        <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-          <base-button icon="mdi:account">Edit</base-button>
-        </router-link>
+        <link-button :to="{ name: 'UserAccounts' }" icon="mdi:account"
+          >Edit</link-button
+        >
       </div>
     </div>
   </div>
@@ -56,8 +55,4 @@ defineProps<Props>()
   gap: 2rem;
   margin-top: 1rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 </style>

src/components/User/UserProfileMobile.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import UserAccounts from '/@/components/User/UserAccounts.vue'
 import type { UserDetail } from '/@/lib/apis'
@@ -23,9 +22,9 @@ defineProps<Props>()
     </div>
     <div :class="$style.accounts">
       <user-accounts :accounts="user.accounts" />
-      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-        <base-button icon="mdi:account">Edit</base-button>
-      </router-link>
+      <link-button :to="{ name: 'UserAccounts' }" icon="mdi:account"
+        >Edit</link-button
+      >
     </div>
   </div>
 </template>
@@ -57,8 +56,4 @@ defineProps<Props>()
   gap: 2rem;
   margin-top: 1rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 </style>

src/pages/Contest.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
-import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 
 import apis, { ContestDetail, ContestTeam } from '/@/lib/apis'
-import { RouterLink } from 'vue-router'
 import { getDisplayDuration } from '/@/lib/date'
 import Icon from '/@/components/UI/Icon.vue'
 import useParam from '/@/lib/param'
@@ -31,12 +30,12 @@ const contestTeams: ContestTeam[] = (
         detail="コンテストの詳細です。"
         :class="$style.header"
       />
-      <router-link
+      <link-button
         :to="{ name: 'ContestEdit', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="primary"
+        icon="mdi:pencil"
+        >Edit</link-button
       >
-        <base-button type="primary" icon="mdi:pencil">Edit</base-button>
-      </router-link>
     </div>
     <div>
       <section :class="$style.section">
@@ -73,15 +72,14 @@ const contestTeams: ContestTeam[] = (
       </section>
     </div>
 
-    <router-link :to="{ name: 'Contests' }" :class="$style.link">
-      <base-button
-        :class="$style.backButton"
-        type="secondary"
-        icon="mdi:arrow-left"
-      >
-        Back
-      </base-button>
-    </router-link>
+    <link-button
+      :to="{ name: 'Contests' }"
+      :class="$style.backButton"
+      type="secondary"
+      icon="mdi:arrow-left"
+    >
+      Back
+    </link-button>
   </page-container>
 </template>
 
@@ -94,10 +92,6 @@ const contestTeams: ContestTeam[] = (
 .header {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .section {
   margin-bottom: 2rem;
 }

src/pages/ContestEdit.vue

@@ -2,9 +2,10 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { EditContestRequest } from '/@/lib/apis'
 import type { ContestDetail } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -131,18 +132,13 @@ const deleteContest = async () => {
     <delete-form target="コンテスト" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <link-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
       >
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -176,10 +172,6 @@ const deleteContest = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;

src/pages/ContestNew.vue

@@ -2,8 +2,9 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { CreateContestRequest } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { computed, reactive, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -114,15 +115,13 @@ const createContest = async () => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'Contests' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <link-button
+        :to="{ name: 'Contests' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
+      >
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -147,10 +146,6 @@ const createContest = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;

src/pages/ContestTeamEdit.vue

@@ -2,9 +2,10 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
+import LinkButton from '/@/components/UI/LinkButton.vue'
 import apis, { ContestTeamDetail, EditContestTeamRequest } from '/@/lib/apis'
 import type { ContestDetail, User } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
@@ -136,12 +137,12 @@ const deleteContestTeam = async () => {
     <delete-form target="コンテストチーム" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <link-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</link-button
       >
-        <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -175,10 +176,6 @@ const deleteContestTeam = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;