refactor the "SEE ALL" button into a component

src/views/AlbumsGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="album-grid-view v-scroll-page">
+  <div class="card-grid-view v-scroll-page">
     <div class="scrollable">
       <AlbumCard
         v-for="album in artist.toShow"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 import AlbumCard from "@/components/shared/AlbumCard.vue";
+import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 
 import { onMounted } from "vue";
 import { onBeforeRouteLeave, useRoute } from "vue-router";

src/views/ArtistView/Main.vue

@@ -180,9 +180,5 @@ onBeforeRouteLeave(async () => {
     margin: 1rem;
     padding-left: 1rem;
   }
-
-  .see-all {
-    opacity: 0.75;
-  }
 }
 </style>

src/views/FavoriteAlbums.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="album-grid-view v-scroll-page">
+  <div class="card-grid-view v-scroll-page">
     <div class="scrollable">
       <AlbumCard
         v-for="album in albums"
@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, Ref, ref } from "vue";
 import { getFavAlbums } from "@/composables/fetch/favorite";
+import { onMounted, Ref, ref } from "vue";
 
 import AlbumCard from "@/components/shared/AlbumCard.vue";
 import { Album } from "@/interfaces";

src/views/FavoriteArtists.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="card-grid-view v-scroll-page">
+    <div class="scrollable">
+      <ArtistCard
+        v-for="artist in artists"
+        :artist="artist"
+        :key="artist.artisthash"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getFavArtists } from "@/composables/fetch/favorite";
+import { onMounted, Ref, ref } from "vue";
+
+import ArtistCard from "@/components/shared/ArtistCard.vue";
+import { Artist } from "@/interfaces";
+
+const artists: Ref<Artist[]> = ref([]);
+
+onMounted(() => {
+  getFavArtists(0).then((data) => (artists.value = data));
+});
+</script>

src/views/Favorites.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div class="fav-artists" v-if="favArtists.length">
-      <FeaturedArtists :artists="favArtists" :title="'Artists ❤️'" />
+      <FeaturedArtists :artists="favArtists" :title="'Artists ❤️'" :route="'/favorites/artists'"/>
     </div>
   </div>
 </template>
@@ -67,10 +67,6 @@ async function handlePlay(index: number) {
     margin-top: 0;
   }
 
-  .see-all {
-    opacity: 0.75;
-  }
-
   .fav-tracks {
     margin-bottom: 2rem;