break down search component into smaler components

src/components/shared/AlbumCard.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="result-item border">
+    <div
+      class="album-art image"
+      :style="{
+        backgroundImage: `url(&quot;${album.image}&quot;)`,
+      }"
+    ></div>
+    <div class="title ellip">{{ album.name }}</div>
+    <div class="artistsx ellipsis">{{ album.artist }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["album"],
+};
+</script>
+
+<style lang="scss">
+.result-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: $small;
+  border-radius: $small;
+  text-align: left !important;
+  width: 9rem;
+
+  .album-art {
+    height: 7rem;
+    width: 7rem;
+    border-radius: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .title {
+    width: 7rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+  }
+
+  .artistsx {
+    width: 7rem;
+    display: flex;
+    font-size: 0.8rem;
+    text-align: left;
+    color: rgba(40, 116, 216, 0.767);
+  }
+}
+</style>

src/components/shared/ArtistCard.vue

@@ -1,19 +1,18 @@
 <template>
-  <div class="xartist border">
+  <div class="xartist border" :style="{ backgroundColor: `#${color}` }">
     <div
       class="artist-image image"
       :style="{ backgroundImage: `url('${artist.image}')` }"
     ></div>
     <div>
-    <p class="artist-name ellipsis">{{ artist.name }}</p>
+      <p class="artist-name ellipsis">{{ artist.name }}</p>
     </div>
-    <!-- <div class="a-circle"></div> -->
   </div>
 </template>
 
 <script>
 export default {
-  props: ["artist"],
+  props: ["artist", "color"],
 };
 </script>
 
@@ -22,11 +21,11 @@ export default {
   flex: 0 0 auto;
   overflow: hidden;
   position: relative;
-  margin: 0 $smaller 0 $smaller;
+  margin: 0 $small 0 0;
+
   width: 9em;
   height: 11em;
   border-radius: $small;
-  background-color: #232452;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/shared/SongItem.vue

@@ -1,8 +1,8 @@
 <template>
   <tr
     class="songlist-item"
-    :class="{ current: current._id.$oid == song._id.$oid }"
   >
+    <!-- :class="{ current: current._id.$oid == song._id.$oid }" -->
     <td class="flex" @click="emitUpdate(song)">
       <div
         class="album-art rounded image"