Move content selections in its own component

src/components/ContentSelections.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="root">
+    <div class="content-selection" v-for="contentSelection in contentSelections">
+      <content-selection :type="contentSelection.type" :title="contentSelection.title"
+                         :thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
+                         :description="contentSelection.description"
+      >
+      </content-selection>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '../scss/_variables';
+
+  .content-selections {
+    .content-selection {
+      margin-bottom: 80px;
+    }
+
+    .discover-instances {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+</style>
+
+<script>
+  import ContentSelection from './ContentSelection'
+
+  export default {
+    props: {
+    },
+
+    components: {
+      ContentSelection
+    },
+
+    data: () => ({
+      contentSelections: [
+        {
+          type: 'video',
+          title: 'Nothing to hide',
+          thumbnailUrl: 'https://peertube2.cpy.re/static/thumbnails/d2a5ec78-5f85-4090-8ec5-dc1102e022ea.jpg',
+          url: 'https://peertube2.cpy.re/videos/watch/d2a5ec78-5f85-4090-8ec5-dc1102e022ea',
+          tags: ['tag', 'tag2', 'tag3'],
+          description: 'Nothing to Hide (2017) est un film documentaire franco-allemand de Marc Meillassoux et Mihaela Gladovic, qui s\'intéresse aux effets de la surveillance de masse sur les individus et la société. Proposant un regard critique à propos des lois sur le renseignement mises en place par de nombreux États ces dernières années, le film nous rappelle à quel point le débat sur l’usage des données personnelles est actuel et questionne les fondements de nos démocraties.'
+        }
+      ]
+    }),
+  }
+</script>

src/views/Home.vue

@@ -34,13 +34,7 @@
         <div class="border-title"></div>
       </div>
 
-      <div class="content-selection" v-for="contentSelection in contentSelections">
+      <content-selections></content-selections>
-        <content-selection :type="contentSelection.type" :title="contentSelection.title"
-                           :thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
-                           :description="contentSelection.description"
-        >
-        </content-selection>
-      </div>
 
       <div class="bottom-link-wrapper">
         <router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
@@ -360,17 +354,6 @@
     }
   }
 
-  .content-selections {
-    .content-selection {
-      margin-bottom: 80px;
-    }
-
-    .discover-instances {
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
   #what-is-peertube {
     .ambition {
       display: flex;
@@ -421,29 +404,16 @@
 
 <script>
   import IconInstance from '../components/icons/IconInstance.vue'
-  import ContentSelection from '../components/ContentSelection.vue'
   import IconRight from '../components/icons/IconRight.vue'
+  import ContentSelections from '../components/ContentSelections'
 
   export default {
     components: {
-      ContentSelection,
+      ContentSelections,
       IconInstance,
       IconRight
     },
 
-    data: () => ({
-      contentSelections: [
-        {
-          type: 'video',
-          title: 'Nothing to hide',
-          thumbnailUrl: 'https://peertube2.cpy.re/static/thumbnails/d2a5ec78-5f85-4090-8ec5-dc1102e022ea.jpg',
-          url: 'https://peertube2.cpy.re/videos/watch/d2a5ec78-5f85-4090-8ec5-dc1102e022ea',
-          tags: ['tag', 'tag2', 'tag3'],
-          description: 'Nothing to Hide (2017) est un film documentaire franco-allemand de Marc Meillassoux et Mihaela Gladovic, qui s\'intéresse aux effets de la surveillance de masse sur les individus et la société. Proposant un regard critique à propos des lois sur le renseignement mises en place par de nombreux États ces dernières années, le film nous rappelle à quel point le débat sur l’usage des données personnelles est actuel et questionne les fondements de nos démocraties.'
-        }
-      ]
-    }),
-
     metaInfo: {
       title: 'JoinPeerTube',
       titleTemplate: null