rewrite recommendation component with script setup

src/components/RightSideBar/Home/Main.vue

@@ -14,7 +14,7 @@
 </style>
 
 <script setup lang="ts">
-import Recommendations from "../Recommendation.vue";
+import Recommendations from "./Recommendation.vue";
 import UpNext from "../queue/upNext.vue";
 import useQStore from "../../../stores/queue";
 const queue = useQStore();

src/components/RightSideBar/Home/Recommendation.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="r-tracks rounded border">
+    <div class="heading">Similar tracks</div>
+    <div class="tracks">
+      <div class="song-item" v-for="song in songs" :key="song.artist">
+        <img src="../../../assets/images/null.webp" class="rounded" />
+        <div class="tags">
+          <div class="title">{{ song.title }}</div>
+          <div class="artist">{{ song.artist }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const songs = [
+  {
+    title: "Imagine",
+    artist: "John Lennon",
+  },
+  {
+    title: "Mockingbird",
+    artist: "Eminem",
+  },
+];
+</script>
+
+<style lang="scss">
+.r-tracks {
+  margin: 0.5rem 0 0.5rem 0;
+  padding: 0.5rem;
+
+  .heading {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .tracks .song-item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+
+    img {
+      width: 3rem;
+      aspect-ratio: 1;
+      margin-right: $small;
+    }
+
+    .title {
+      margin: 0;
+    }
+
+    .artist {
+      font-size: small;
+      color: rgba(255, 255, 255, 0.637);
+      margin: 0;
+    }
+
+    &:hover {
+      background-color: #3a39393d;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/RightSideBar/Recommendation.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="r-tracks rounded border">
-    <div class="heading">Similar Tracks</div>
-    <div class="tracks">
-      <div class="song-item" v-for="song in songs" :key="song">
-        <div class="album-art image"></div>
-        <div class="tags">
-          <p class="title">{{ song.title }}</p>
-          <hr />
-          <p class="artist">{{ song.artist }}</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-    const songs = [
-      {
-        title: "Imagine",
-        artist: "John Lennon",
-      },
-      {
-        title: "Mockingbird",
-        artist: "Eminem",
-      },
-    ];
-
-    const r_albums = ["Crybaby", "Everybody's Everything", "Castles II"];
-
-    return { songs, r_albums };
-  },
-};
-</script>
-
-<style lang="scss">
-.r-tracks {
-  margin: 0.5rem 0 0.5rem 0;
-  padding: 0.5rem;
-
-  .heading {
-    font-size: 1.25rem;
-    margin-bottom: 0.5rem !important;
-  }
-}
-
-.r-tracks .tracks .song-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-}
-
-.r-tracks .tracks .song-item:hover {
-  background-color: #3a39393d;
-  cursor: pointer;
-}
-
-.r-tracks .tracks .song-item hr {
-  border: none;
-  margin: 0.1rem;
-}
-
-.r-tracks .tracks .song-item .album-art {
-  width: 3rem;
-  height: 3rem;
-  background-color: #ccc;
-  margin: 0 0.5rem 0 0;
-  border-radius: 0.5rem;
-  background-image: url(../../assets/images/null.webp);
-}
-
-.r-tracks .tracks .song-item .artist {
-  font-size: small;
-  color: rgba(255, 255, 255, 0.637);
-  margin: 0;
-}
-
-.r-tracks .tracks .song-item .title {
-  margin: 0;
-}
-</style>