Added first revision of MusicBox

src/renderer/components/MusicBox.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="music-box">
+        <img @load="onLoad" src="/static/demo/artwork-5.png" alt="Artwork">
+        <p class="title">Don't Hide - single</p>
+        <p class="artist">Mike Perry & Willie Willie Willie</p>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'MusicBox',
+  methods: {
+    onLoad () {
+      console.log('loaded')
+    }
+  }
+}
+</script>
+
+<style scoped lang="sass">
+div.music-box
+    width: 150px
+    img
+        border-radius: 4px
+        width: 100%
+        height: auto
+    p
+        text-overflow: ellipsis
+        white-space: nowrap
+        overflow: hidden
+        margin: 0.5rem 0
+        &.title
+            font-size: .9rem
+        &.artist
+            font-size: 0.8rem
+            color: lighten(black,50)
+</style>

src/renderer/layouts/ActionBar.vue

@@ -36,8 +36,8 @@ export default {
 <style lang="sass" scoped>
 section.action-bar
   display: flex
-  padding: 1rem 2.5rem
   align-items: center
+  padding-bottom: 1rem
   .search-wrapper
     transition: width 200ms
     transition: margin-top 100ms

src/renderer/layouts/HomePage.vue

@@ -1,18 +1,28 @@
 <template>
-    <section>
+    <section class="page">
       <ActionBar />
-      <p>home</p>
+      <div>
+        <MusicBox />
+      </div>
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
+import MusicBox from '../components/MusicBox'
 export default {
   name: 'HomePage',
-  components: {ActionBar}
+  components: { ActionBar, MusicBox },
+  data: () => {
+    return {
+      top: []
+    }
+  }
 }
 </script>
 
-<style>
+<style scoped lang="sass">
+section.page
+    padding: 1rem 2.5rem
 
 </style>