refactor tile component

src/library/album/AlbumList.vue

@@ -1,30 +1,26 @@
 <template>
   <div>
     <Spinner :data="albums" v-slot="{albums: data}">
-      <Tiles :items="albums" v-slot="{ item }" square>
-        <div class="text-truncate">
-          <router-link :to="{name: 'album', params: { id: item.id } }">
-            <strong>{{ item.name }}</strong>
-          </router-link>
-        </div>
-        <div class="text-truncate text-muted">
-          <router-link :to="{name: 'artist', params: { id: item.artistId } }">
-            {{ item.artist }}
-          </router-link>
-        </div>
+      <Tiles square>
+        <Tile v-for="item in albums" :key="item.id"
+          :image="item.image"
+          :to="{name: 'album', params: { id: item.id } }"
+          :title="item.name">
+          <template v-slot:text>
+            <router-link :to="{name: 'artist', params: { id: item.artistId } }">
+              {{ item.artist }}
+            </router-link>
+          </template>
+        </Tile>
       </Tiles>
     </Spinner>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
-import AlbumCard from "./AlbumCard.vue";
 import { AlbumSort } from '@/shared/api';
 
 export default Vue.extend({
-  components: {
-    AlbumCard
-  },
   props: {
     msg: String
   },

src/library/artist/ArtistDetails.vue

@@ -10,33 +10,31 @@
       </div>
     </div>
     <h3 class="pt-5">Albums</h3>
-    <Tiles :items="item.albums" v-slot="{ item }" square>
-      <div class="text-truncate">
-        <router-link :to="{name: 'album', params: { id: item.id } }">
-          <strong>{{ item.name }}</strong>
-        </router-link>
-      </div>
-      <div class="text-truncate text-muted">
-        {{ item.artist }}
-      </div>
+    <Tiles square>
+      <Tile v-for="item in item.albums" :key="item.id"
+        :image="item.image"
+        :to="{name: 'album', params: { id: item.id } }"
+        :title="item.name"
+        :text="item.artist">
+      </Tile>
     </Tiles>
-
     <h3 class="pt-5">Similar artist</h3>
-    <Tiles :items="item.similarArtist" v-slot="{ item }">
-      <ArtistCard :item="item"></ArtistCard>
+    <Tiles>
+      <Tile v-for="item in item.similarArtist" :key="item.id"
+        :to="{name: 'artist', params: { id: item.id } }"
+        :title="item.name">
+        <template v-slot:text>
+          <strong>{{ item.albumCount }}</strong> albums
+        </template>
+      </Tile>
     </Tiles>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
-import AlbumCard from "@/library/album/AlbumCard.vue";
-import ArtistCard from "@/library/artist/ArtistCard.vue";
 
 export default Vue.extend({
-  components: {
-    AlbumCard,
-    ArtistCard,
-  },
+  components: {},
   props: {
     id: String
   },

src/library/artist/ArtistList.vue

@@ -1,23 +1,19 @@
 <template>
-  <Tiles :items="items" v-slot="{ item }">
-    <div class="text-truncate">
-      <router-link :to="{name: 'artist', params: { id: item.id } }">
-        <strong>{{ item.name }}</strong>
-      </router-link>
-    </div>
-     <div class="text-truncate text-muted">
-      <strong>{{ item.albumCount }}</strong> albums
-    </div>
+  <Tiles>
+    <Tile v-for="item in items" :key="item.id"
+      :image="item.image"
+      :to="{name: 'artist', params: { id: item.id } }"
+      :title="item.name">
+      <template v-slot:text>
+        <strong>{{ item.albumCount }}</strong> albums
+      </template>
+    </Tile>
   </Tiles>
 </template>
 <script lang="ts">
   import Vue from "vue";
-  import ArtistCard from "./ArtistCard.vue";
 
   export default Vue.extend({
-    components: {
-      ArtistCard,
-    },
     data() {
       return {
         items: []

src/library/genre/GenreList.vue

@@ -1,34 +1,30 @@
 <template>
-  <Tiles :items="items">
-    <template v-slot="{ item }">
-      <div class="text-truncate">
-        <router-link :to="{name: 'genre', params: { id: item.id } }">
-          <strong>{{ item.name }}</strong>
-        </router-link>
-      </div>
-      <div class="text-truncate text-muted">
+  <Tiles>
+    <Tile v-for="item in items" :key="item.id"
+      :image="item.image"
+      :to="{name: 'genre', params: { id: item.id } }"
+      :title="item.name">
+      <template v-slot:text>
         <strong>{{ item.albumCount }}</strong> albums ·
         <strong>{{ item.songCount }}</strong> songs
-      </div>
-    </template>
+      </template>
+    </Tile>
   </Tiles>
 </template>
 <script lang="ts">
 import Vue from "vue";
 
 export default Vue.extend({
-  components: {
-    
-  },
+  components: {},
   data() {
     return {
-      items: []
+      items: [],
     };
   },
   created() {
-    this.$api.getGenres().then(items => {
+    this.$api.getGenres().then((items) => {
       this.items = items;
     });
-  }
+  },
 });
 </script>