🎨 Simplify toggling between views

components/CardsView.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+  .cards
+    Card(v-for='resource in category.resources' :resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+</template>
+
+<script>
+import Card from './Card'
+
+export default {
+  components: { Card },
+  props: ['category', 'createCopyUrl', 'activeCard'],
+}
+</script>

components/TableView.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+  table
+    TableRow(v-for='resource in category.resources' :resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+</template>
+
+<script>
+import TableRow from '../components/TableRow'
+
+export default {
+  components: { TableRow },
+  props: ['category', 'createCopyUrl', 'activeCard'],
+}
+</script>

pages/_category.vue

@@ -3,21 +3,16 @@
     transition(name="fade-title" @after-enter="afterEnter")
       h1(v-if="showTitle") {{ category.title }}
     transition(name="fade-card")
-      .cards(v-if="areCardsVisible && showCards")
+      div(v-if="showCards")
-        template(v-for='resource in category.resources' )
+        <component :is="areCardsVisible ? 'CardsView' : 'TableView'" :category="category" :createCopyUrl="createCopyUrl" :activeCard='activeCard'></component>
-          Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
-    transition(name="fade-card")
-      table(v-if="!areCardsVisible && showCards")
-        template(v-for='resource in category.resources' )
-          TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
-import Card from '../components/Card'
+import CardsView from '../components/CardsView'
-import TableRow from '../components/TableRow'
+import TableView from '../components/TableView'
 
 export default {
-  components: { Card, TableRow },
+  components: { CardsView, TableView },
   data() {
     return {
       categoryRouteTitle: this.$route.params.category,