add backend code

src/components/AlbumView/FromTheSameArtist.vue

@@ -85,7 +85,7 @@ export default {
 <style lang="scss">
 .f-a-artists {
   position: relative;
-  height: 12em;
+  height: 13rem;
   width: calc(100%);
   background-color: #1f1e1d;
   padding: $small;
@@ -167,7 +167,7 @@ export default {
   width: 9em;
   height: 10em;
   border-radius: $small;
-  background-color: #210368;
+  background-color: #064e92;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -201,7 +201,7 @@ export default {
   overflow: hidden;
   margin-left: -0.1rem;
 
-  background: linear-gradient(239deg, #704bca, #d77422, #140059, #9cb0c3);
+  background: linear-gradient(239deg, #704bca, #d77422, #064e92, #9cb0c3);
   background-size: 800% 800%;
 
   -webkit-animation: similarAlbums 29s ease infinite;

src/components/AlbumView/Header.vue

@@ -43,7 +43,7 @@ export default {
 <style lang="scss">
 .a-header {
   height: 14rem;
-  background: rgb(228, 151, 151);
+  background: rgb(0, 0, 0);
   display: flex;
   align-items: center;
   padding: 0 1rem 0 1rem;
@@ -51,7 +51,7 @@ export default {
   .art {
     width: 12rem;
     height: 12rem;
-    background: no-repeat center/cover url(../../assets/images/girl1.jpg);
+    background: no-repeat center/cover url(../../assets/images/jw.jpeg);
     margin-right: 1rem;
   }
 

src/components/AlbumsExplorer/AlbumList.vue

@@ -7,12 +7,17 @@
       </div>
     </div>
     <div class="all-albums">
-      <div class="item rounded" v-for="album in albums" :key="album">
+      <router-link
+        :to="{ path: '/albums/1' }"
+        class="item rounded"
+        v-for="album in albums"
+        :key="album"
+      >
         <div class="play"></div>
         <div class="album-art image rounded"></div>
         <div class="name ellip">{{ album.title }}</div>
         <div class="artist ellip">{{ album.artist }}</div>
-      </div>
+      </router-link>
     </div>
   </div>
 </template>

src/components/AlbumsExplorer/TopAlbums.vue

@@ -2,7 +2,12 @@
   <div class="top-albums">
     <div class="heading">TOP ALBUMS</div>
     <div class="items">
-      <div class="item rounded" v-for="album in albums" :key="album">
+      <router-link
+        :to="{ path: '/albums/1' }"
+        class="item rounded"
+        v-for="album in albums"
+        :key="album"
+      >
         <div class="image rounded"></div>
         <div class="info">
           <div class="name ellip">{{ album.title }}</div>
@@ -13,7 +18,7 @@
             <div class="text ellip">{{ album.top_track }}</div>
           </div>
         </div>
-      </div>
+      </router-link>
     </div>
   </div>
 </template>
@@ -64,8 +69,7 @@ export default {
 
     .item {
       height: 10rem;
-      width: 100%;
+      width: clamp(10rem, 100%, 25rem);
-      max-width: 25rem;
       background-color: rgb(7, 6, 6);
       display: grid;
       align-items: center;
@@ -75,7 +79,7 @@ export default {
       transition: all 0.2s ease-in-out;
 
       &:hover {
-        transform: translateY(-.5em);
+        transform: translateY(-0.5em);
       }
 
       .image {
@@ -144,7 +148,7 @@ export default {
         }
       }
 
-      &:nth-child(2){
+      &:nth-child(2) {
         background-color: rgb(0, 74, 117);
 
         .image {
@@ -152,7 +156,7 @@ export default {
         }
       }
 
-      &:nth-child(3){
+      &:nth-child(3) {
         background-color: rgb(161, 106, 106);
       }
     }

src/components/FolderView/SongList.vue

@@ -96,7 +96,7 @@ export default {
   height: 3rem;
   margin-right: 1rem;
   background-color: #ccc;
-  background-image: url(../../assets/images/weed.jpg);
+  background-image: url(../../assets/images/jw.jpeg);
 }
 
 .folder .table .flex {

src/data/songs.js

@@ -1,54 +1,54 @@
 const songs = [
   {
+    title: "Doom",
+    album: "Fighting Demons",
+    artists: ["Juice Wrld"],
+    duration: "03:14",
+  },
+  {
+    title: "Girl Of My Dreams",
+    album: "Fighting Demons",
+    artists: ["Juice Wrld, ", "Suga [BTS]"],
+    duration: "03:14",
+  },
+  {
+    title: "Feline",
+    album: "Fighting Demons",
+    artists: ["Juice Wrld, ", "Polo G, ", "Lil Yachty"],
+    duration: "03:14",
+  },
+  {
+    title: "Rockstar In His Prime",
+    album: "Fighting Demons",
+    artists: ["Juice Wrld"],
+    duration: "03:14",
+  },{
     title: "Because I got high",
-    album: "The best of",
+    album: "Fighting Demons",
-    artists: ["Weedman, ", "Bobby Brown"],
+    artists: ["Juice Wrld"],
     duration: "03:14",
   },
   {
     title: "Is this love",
-    album: "Natural Mystic",
+    album: "Fighting Demons",
     artists: ["Bob Marley"],
     duration: "03:14",
   },
   {
     title: "I'm a little teapot",
-    album: "Love songs",
+    album: "Fighting Demons",
-    artists: ["Ricky Martin"],
+    artists: ["Juice Wrld"],
     duration: "03:14",
   },
   {
     title: "Don't stop me now",
-    album: "Remastered 2011",
+    album: "Fighting Demons",
-    artists: ["Queen"],
+    artists: ["Juice Wrld"],
     duration: "03:14",
   },{
     title: "Because I got high",
-    album: "The best of",
+    album: "Fighting Demons",
-    artists: ["Weedman, ", "Bobby Brown"],
+    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Is this love",
-    album: "Natural Mystic",
-    artists: ["Bob Marley"],
-    duration: "03:14",
-  },
-  {
-    title: "I'm a little teapot",
-    album: "Love songs",
-    artists: ["Ricky Martin"],
-    duration: "03:14",
-  },
-  {
-    title: "Don't stop me now",
-    album: "Remastered 2011",
-    artists: ["Queen"],
-    duration: "03:14",
-  },{
-    title: "Because I got high",
-    album: "The best of",
-    artists: ["Weedman, ", "Bobby Brown"],
     duration: "03:14",
   },
 ];