Simplify PadButton links

spraakbanken · Sep 20, 2023 · ccdaefa · ccdaefa
1 parent fa64289
commit ccdaefa
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/src/components/PadButton.vue b/src/components/PadButton.vue
@@ -1,18 +1,25 @@
 <template>
-  <div
+  <router-link
+    :to="to"
     class="mink-button m-2 w-40 h-40 flex flex-col justify-center items-center text-center"
     :class="{ [variantClass]: true, 'cursor-pointer': clickable }"
   >
     <slot />
-  </div>
+  </router-link>
 </template>
 
 <script setup>
 import { computed } from "@vue/reactivity";
 import { useAttrs } from "@vue/runtime-core";
 import { useVariant, variantProps } from "@/variant.composable";
 
-const props = defineProps({ ...variantProps });
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true,
+  },
+  ...variantProps,
+});
 
 const attrs = useAttrs();
 const { variantClass } = useVariant(() => props.variant);

diff --git a/src/corpora/CorpusButton.vue b/src/corpora/CorpusButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <PadButton class="flex">
+  <PadButton class="flex" :to="`/corpus/${id}`">
     <strong>{{ corpusName || id }}</strong>
     <span v-if="corpus.sources && corpus.sources.length">
       {{ $t("files", corpus.sources.length) }}

diff --git a/src/corpora/Dashboard.vue b/src/corpora/Dashboard.vue
@@ -11,21 +11,16 @@
     </HelpBox>
 
     <PendingContent on="corpora" class="flex flex-wrap -mx-2">
-      <router-link
+      <CorpusButton
         v-for="(corpus, corpusId) of corpusStore.corpora"
+        :id="corpusId"
         :key="corpusId"
-        v-slot="{ navigate }"
-        :to="`/corpus/${corpusId}`"
-        custom
-      >
-        <CorpusButton :id="corpusId" @click="navigate" />
-      </router-link>
-      <router-link v-slot="{ navigate }" to="/corpus/new" custom>
-        <PadButton @click="navigate">
-          <icon :icon="['far', 'square-plus']" size="2xl" class="mb-2" />
-          {{ $t("new_corpus") }}
-        </PadButton>
-      </router-link>
+      />
+
+      <PadButton to="/corpus/new">
+        <icon :icon="['far', 'square-plus']" size="2xl" class="mb-2" />
+        {{ $t("new_corpus") }}
+      </PadButton>
     </PendingContent>
   </Section>
   <Section v-if="isAuthenticated" :title="$t('new_corpus')">