create re-usable components

src/components/shared/ArtistCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="xartist border">
+    <div
+      class="artist-image image"
+      :style="{ backgroundImage: `url('${artist.image}')` }"
+    ></div>
+    <div>
+    <p class="artist-name ellipsis">{{ artist.name }}</p>
+    </div>
+    <!-- <div class="a-circle"></div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["artist"],
+};
+</script>
+
+<style lang="scss">
+.xartist {
+  flex: 0 0 auto;
+  overflow: hidden;
+  position: relative;
+  margin: 0 $smaller 0 $smaller;
+  width: 9em;
+  height: 11em;
+  border-radius: $small;
+  background-color: #232452;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .artist-image {
+    width: 7em;
+    height: 7em;
+    border-radius: 50%;
+    margin-bottom: $small;
+    background: url("../../assets/images/null.webp");
+    background-size: 7rem 7rem;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all 0.5s ease-in-out;
+    border: solid 1px rgba(5, 5, 5, 0.055);
+    box-shadow: 0px 0px 80px rgb(0, 0, 0);
+  }
+
+  &:hover {
+    .artist-image {
+      background-position: 50% 20%;
+      border-radius: 20%;
+      background-size: 10rem 10rem;
+    }
+  }
+
+  .artist-name {
+    margin: 0;
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight: 510;
+    max-width: 7rem;
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -0,0 +1,183 @@
+<template>
+  <tr
+    class="songlist-item"
+    :class="{ current: current._id.$oid == song._id.$oid }"
+  >
+    <td class="flex" @click="emitUpdate(song)">
+      <div
+        class="album-art rounded image"
+        :style="{
+          backgroundImage: `url(&quot;${song.image}&quot;)`,
+        }"
+      >
+        <div
+          class="now-playing-track image"
+          v-if="current._id.$oid == song._id.$oid"
+          :class="{ active: is_playing, not_active: !is_playing }"
+        ></div>
+      </div>
+      <div>
+        <span class="ellip">{{ song.title }}</span>
+        <div class="separator no-border"></div>
+        <div class="artist ellip">
+          <span v-for="artist in putCommas(song.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
+      </div>
+    </td>
+    <td class="song-artists">
+      <div class="ellip" v-if="song.artists[0] != ''">
+        <span
+          class="artist"
+          v-for="artist in putCommas(song.artists)"
+          :key="artist"
+          >{{ artist }}</span
+        >
+      </div>
+      <div class="ellip" v-else>
+        <span class="artist">{{ song.album_artist }}</span>
+      </div>
+    </td>
+    <td class="song-album">
+      <div class="ellip" @click="emitLoadAlbum(song.album, song.album_artist)">
+        {{ song.album }}
+      </div>
+    </td>
+    <td class="song-duration">
+      {{ `${Math.trunc(song.length / 60)} min` }}
+    </td>
+  </tr>
+</template>
+
+<script>
+import perks from "@/composables/perks.js";
+import state from "@/composables/state.js";
+
+export default {
+  props: ["song"],
+  emits: ['updateQueue', 'loadAlbum'],
+  setup(props, { emit }) {
+    function emitUpdate(song) {
+      emit("updateQueue", song);
+    }
+
+    function emitLoadAlbum(title, artist) {
+      console.log('hii')
+      emit("loadAlbum", title, artist);
+    }
+
+    return {
+      putCommas: perks.putCommas,
+      emitUpdate,
+      emitLoadAlbum,
+      is_playing: state.is_playing,
+      current: state.current,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.songlist-item {
+  @include phone-only {
+    border: solid;
+
+    td {
+      background-color: #14161a;
+      border-radius: $small;
+    }
+  }
+
+  .song-duration {
+    width: 5rem !important;
+  }
+
+  cursor: pointer;
+
+  .flex {
+    position: relative;
+    padding-left: 4rem;
+    align-items: center;
+
+    .album-art {
+      position: absolute;
+      left: $small;
+      width: 3rem;
+      height: 3rem;
+      margin-right: 1rem;
+      display: grid;
+      place-items: center;
+    }
+
+    .artist {
+      display: none;
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.719);
+
+      @include phone-only {
+        display: unset;
+      }
+    }
+  }
+
+  td {
+    height: 4rem;
+    padding: $small;
+  }
+
+  &:hover {
+    & {
+      & td {
+        background-color: rgb(5, 80, 150);
+      }
+
+      & td:first-child {
+        border-radius: $small 0 0 $small;
+
+        @include phone-only {
+          border-radius: $small;
+        }
+      }
+
+      td:nth-child(2) {
+        @include tablet-portrait {
+          border-radius: 0 $small $small 0 !important;
+        }
+
+        @include tablet-landscape {
+          border-radius: 0;
+        }
+      }
+
+      & > td:nth-child(3) {
+        @include tablet-landscape {
+          border-radius: 0 $small $small 0 !important;
+        }
+      }
+
+      & td:last-child {
+        border-radius: 0 $small $small 0;
+      }
+    }
+  }
+
+  .song-duration {
+    @include tablet-landscape {
+      display: none;
+    }
+  }
+
+  .song-album {
+    @include tablet-portrait {
+      display: none;
+    }
+  }
+
+  .song-artists {
+    @include phone-only {
+      display: none;
+    }
+  }
+}
+</style>