add album header info

src/components/AlbumView/Header.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="a-header rounded">
-    <div class="art rounded"></div>
+    <div id="header-blur"></div>
+    <div
+      class="art rounded"
+      :style="{
+        backgroundImage: `url(&quot;${album_info.image}&quot;)`,
+      }"
+    ></div>
     <div class="info">
       <div class="top">
-        <div class="title">{{ album.title }}</div>
-        <div class="artist">{{ album.artist }}</div>
+        <div class="title">{{ album_info.name }}</div>
+        <div class="artist">{{ album_info.artist }}</div>
       </div>
       <div class="separator"></div>
       <div class="bottom">
         <div class="stats">
-          {{ album.count }} Tracks • {{ album.duration }} • {{ album.date }}
+          {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
         </div>
         <div class="play rounded">
           <div class="icon"></div>
@@ -17,57 +23,79 @@
         </div>
       </div>
     </div>
+    <div class="most-played">
+      <div class="image rounded"></div>
+      <div>
+        <div class="title">Girl Of My Dreams</div>
+        <div class="artist">Juice Wrld, Suga [BTS]</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
-
 export default {
-  setup() {
-    const album = ref({
-      title: "Fighting Demons",
-      artist: "Juice Wrld",
-      count: 17,
-      duration: "54 min",
-      date: 2021,
-    });
-
-    return {
-      album,
-    };
-  },
+  props: ["album_info"],
+  setup() {},
 };
 </script>
 
 <style lang="scss">
-.a-header {
-  height: 14rem;
-  background: rgb(0, 0, 0);
-  background: #355c7d; /* fallback for old browsers */
-  background: -webkit-linear-gradient(
-    to right,
-    #c06c84,
-    #6c5b7b,
-    #355c7d
-  ); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(
-    to right,
-    #c06c84,
-    #6c5b7b,
-    #355c7d
-  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+#header-blur {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  backdrop-filter: blur(20px);
+}
 
-  background-position: 50% 10%;
+.a-header {
+  position: relative;
+  height: 14rem;
+  background: #232526;
+  background: -webkit-linear-gradient(to right, #414345, #232526);
+  background: linear-gradient(to right, #050107, #00090e);
+
+  backdrop-filter: blur(0px);
+  overflow: hidden;
 
   display: flex;
   align-items: center;
   padding: 0 1rem 0 1rem;
 
+  .most-played {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 0 0 0 $small;
+    background-color: rgb(24, 24, 24);
+    border-radius: 1rem;
+    right: 1rem;
+    width: 25rem;
+    height: 5rem;
+
+    .image {
+      width: 4rem;
+      height: 4rem;
+      background-image: url(../../assets/images/jw.jpeg);
+    }
+
+    .title {
+      margin-left: $small;
+      margin-bottom: $small;
+    }
+
+    .artist {
+      font-size: small;
+      margin-left: $small;
+    }
+  }
+
   .art {
     width: 12rem;
     height: 12rem;
-    background: no-repeat center/cover url(../../assets/images/jw.jpeg);
+    background: no-repeat center/cover url(../../assets/images/null.webp);
     margin-right: 1rem;
   }
 
@@ -104,7 +132,7 @@ export default {
         width: 6rem;
         display: flex;
         align-items: center;
-        background: rgb(33, 145, 61);
+        background: $blue;
         padding: $small;
         margin: $small 0;