refactor tile component

src/shared/components/Tile.vue

@@ -0,0 +1,44 @@
+<template functional>
+  <div class="tile card">
+    <div class="tile-img">
+      <img v-if="props.image" :src="props.image">
+      <Icon v-else class="tile-img-fallback text-muted" icon="music-note-beamed"/>
+    </div>
+    <div class="card-body">
+      <div class="text-truncate font-weight-bold">
+        <slot name="title">
+          <router-link :to="props.to">
+            {{ props.title }}
+          </router-link>
+        </slot>
+      </div>
+      <div class="text-truncate text-muted">
+        <slot name="text">
+          {{ props.text }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+  .tile-img {
+    position: relative;
+    width: 100%;
+    background-color: var(--secondary);
+
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .tile-img-fallback {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 4.5rem;
+  }
+</style>

src/shared/components/Tiles.vue

@@ -1,18 +1,6 @@
 <template functional>
- <div class="tiles" :class="props.square ? 'tiles-sq' : 'tiles-rect'">
-    <div v-for="(item, index) in props.items" :key="item.id">
-      <div class="card">
-        <div class="tile-img bg-secondary">
-          <div class="tile-img-inner">
-            <img v-if="item.image" :src="item.image">
-            <Icon v-else class="fallback-img text-muted" icon="music-note-beamed"/>
-          </div>
-        </div>
-        <div class="card-body">
-          <slot :item="item" :index="index"></slot>
-        </div>
-      </div>
-    </div>
+  <div class="tiles" :class="props.square ? 'tiles-square' : 'tiles-rect'">
+    <slot></slot>
   </div>
 </template>
 <style lang="scss">
@@ -28,47 +16,23 @@
     }
   }
 
-  .tiles-sq {
+  .tiles-square {
     .tile-img {
       padding-bottom: 100%;
     }
   }
+
   .tiles-rect {
     .tile-img {
       padding-bottom: 70%;
     }
   }
-  .tile-img {
-    position: relative;
-    width: 100%;
-    
-    .tile-img-inner {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .fallback-img {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 4.5rem;
-      }
-    }
-  }
 </style>
 <script lang="ts">
   import Vue from "vue";
 
   export default Vue.extend({
     props: {
-      items: { type: Array, required: true },
       square: { type: Boolean, default: false },
     }
   });

src/shared/components/index.ts

@@ -3,12 +3,14 @@ import Icon from "./Icon.vue";
 import OverflowMenu from "./OverflowMenu.vue";
 import Spinner from "./Spinner.vue";
 import Tiles from "./Tiles.vue";
+import Tile from "./Tile.vue";
 
 const components = {
   Icon,
   OverflowMenu,
   Spinner,
   Tiles,
+  Tile,
 };
 
 type Key = keyof typeof components;