Standardize the MusicRow

src/renderer/layouts/HomePage.vue

@@ -2,7 +2,7 @@
       <section class="wtf">
         <ActionBar class="action-bar" />
         <div class="upper-row" >
-          <MusicRow :items='items' />
+          <MusicRow :items='items' title="Top rated" />
         </div>
 
         <div class="middle-row">
@@ -31,30 +31,13 @@
           </div> <!-- favourite box-->
 
           <div class="grow-half recommend" >
-            <div class="recommend__title">
-              <legend>Recommended For You</legend>
-            </div>
-
-            <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom half">
-              <MusicBox v-for="item in items" :key="item.id" :item="item" />
-            </carousel>
-
-            <!-- <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
-              <MusicBox v-for="item in items" :key="item.id" :item="item" />
-            </carousel> -->
-
+            <MusicRow :items='items' title="Recommended for you" class="carousel-custom half" /> 
           </div> <!-- recommended box -->
         </div>
 
         <div class="lower-row">
           <div class="genre">
-            <div class="genre__title">
-              <legend>top geners</legend>
-            </div>
-
-            <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
-              <MusicBox v-for="genere in geners" :key="genere.id" :item="genere" />
-            </carousel>
+            <MusicRow :items='geners' title="Top genres" class="carousel-custom half" /> 
           </div>
         </div>
       </section>

src/renderer/layouts/MusicRow.vue

@@ -1,6 +1,6 @@
 <template>
     <section class="music-row">
-        <legend>Top Rated</legend>
+        <legend>{{title}}</legend>
         <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
            <MusicBox v-for="item in items" :key="item.id" :item="item" />
         </carousel>
@@ -13,7 +13,7 @@ import carousel from 'vue-owl-carousel'
 
 export default {
   name: 'MusicRow',
-  props: ['items'],
+  props: ['items', 'title'],
   components: { MusicBox, carousel }
 }
 </script>
@@ -25,6 +25,7 @@ section.music-row
         font-size: 2rem
         font-family: 'Roboto Slab', serif        
         margin: 20px 0px
+        white-space: nowrap
     .carousel-custom
       .owl-stage-outer
         overflow: unset